CSS 动画是一种让网页内容生动活泼的有效手段。以下是一些常见的 CSS 动画效果，它们可以应用在各种元素和场景中。
- 淡入淡出效果
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
- 滑入滑出效果
.slide-enter-active, .slide-leave-active {
transition: transform 0.3s;
}
.slide-enter-from, .slide-leave-to {
transform: translateX(10px);
}
- 旋转加缩放效果
.rotate-scale-enter-active {
transition: all 0.5s ease-in-out;
}
.rotate-scale-leave-active {
transition: all 0.2s ease-in-out;
position: absolute;
}
.rotate-scale-enter-from, .rotate-scale-leave-to {
transform: scale(0) rotate(180deg);
}
- 渐变背景色效果
.color-change-enter-active, .color-change-leave-active {
transition: background-color 0.5s;
}
.color-change-enter-from, .color-change-leave-to {
background-color: #ff0000;
}
- 图片轮播效果
.carousel-enter-active, .carousel-leave-active {
transition: all 1s;
}
.carousel-enter-from, .carousel-leave-to {
transform: translateX(100px);
opacity: 0;
}
这些 CSS 动画效果可以通过 Vue.js 或 React.js 等现代前端框架中的 <transition> 或 <animated> 组件来应用。
例如，在 Vue.js 中使用一个淡入淡出效果：
<template>
<div id="app">
<transition name="fade">
<div v-if="show">Hello World!</div>
</transition>
<button @click="show = !show">Toggle</button>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>
以上代码中的 <transition name="fade"> 是关键部分，它会根据 show 数据属性的变化来应用淡入淡出动画。