css3 晃动动画

CSS3提供了很多的动画效果，其中最常用的就是晃动动画。这种动画效果可以帮助网页设计者让网站更加生动有趣，增加用户的体验感。下面来介绍一下如何使用CSS3实现晃动动画效果。

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: shake 0.5s linear infinite;
}
@keyframes shake {
0% {
     transform: translate(0, 0) rotate(0);
 }
10% {
     transform: translate(-10px, 0) rotate(-5deg);
 }
20% {
     transform: translate(10px, 0) rotate(5deg);
 }
30% {
     transform: translate(-10px, 0) rotate(-5deg);
 }
40% {
     transform: translate(10px, 0) rotate(5deg);
 }
50% {
     transform: translate(-10px, 0) rotate(-5deg);
 }
60% {
     transform: translate(10px, 0) rotate(5deg);
 }
70% {
     transform: translate(-10px, 0) rotate(-5deg);
 }
80% {
     transform: translate(10px, 0) rotate(5deg);
 }
90% {
     transform: translate(-10px, 0) rotate(-5deg);
 }
100% {
     transform: translate(0, 0) rotate(0);
 }
}
    

上面的代码首先定义了一个class选择器.box，它指定了一个宽和高都是100px，背景颜色是红色的矩形。然后，使用CSS3的animation属性来指定动画效果。这个属性指定了一个晃动动画名字叫做shake，持续时间是0.5秒，动画的速度是线性的，重复次数是无限。

这个动画的实现依赖于CSS3的@keyframes规则，它定义了动画的关键帧。在这个规则里面，定义了从0%到100%的动画转换过程。在每个关键帧里面，使用transform属性来改变元素的位置，让它们在动画过程中产生晃动的效果。例如，前面的关键帧指定了元素的位置是(0, 0)，角度是0度，而中间的关键帧就让元素向左移动10像素，旋转角度为负的5度。

这样一来，当网页中有多个元素的时候，只需要对它们应用这个.box选择器，就可以实现同时晃动的效果。这种动画效果非常简单，但是却可以大大增加网页的趣味性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！