首先,我们需要了解一下CSS3中的一些新的特性。CSS3中引入了众多新的特性,其中就包括了过渡(transition)、动画(animation)和变换(transform)这三个关键字,它们可以帮助我们实现各种各样的动画效果。
/* 定义动画,名称为 blink */
@keyframes blink {
0% {background-color: #FFF;}
50% {background-color: #FF0;}
100% {background-color: #FFF;}
}
/* 应用动画到类名为 btn 的元素 */
.btn {
animation: blink 2s ease infinite;
}
这个代码块中,我们首先定义了一个名为 blink 的动画,这个动画会让背景色从白色变成黄色再变回来,总用时为 2s,循环播放。然后我们将这个动画应用到类名为 btn 的元素上,这个元素的背景色就会开始闪烁。
/* 定义动画,名称为 zoom */
@keyframes zoom {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
100% {transform: scale(1);}
}
/* 应用动画到类名为 img 的元素 */
.img {
animation: zoom 2s ease infinite;
}
这个代码块中,我们定义了一个名为 zoom 的动画,这个动画会让图片先缩小再放大,总用时为 2s,循环播放。然后我们将这个动画应用到类名为 img 的元素上,这个元素就会开始缩放。
通过上述两个例子,我们可以看到CSS3动画效果的强大之处,并且可以通过灵活的使用CSS3属性,来达到我们所需要的视觉效果。同时,在实际开发中,需要注意兼容性问题,可以使用浏览器前缀或者Polyfill等方式来实现兼容。