css3 来回摆动效果

CSS3是一个非常强大和灵活的技术，它可以为网站增添各种酷炫的特效。其中，用CSS3来实现来回摆动效果是一项相当简单却不失魅力的技巧。以下是如何实现它的代码:

.swing {
    animation: swing 2s ease-in-out infinite alternate;
}
@keyframes swing {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(20deg);
}
}
    

首先，在HTML中为相应的元素添加一个class为"swing"，然后在CSS中定义它。这个特效是通过CSS3动画实现的，其中"animation"属性表示动画，有多个用途，本文只介绍其中一种用法。我们使用"swing"这个自定义名称来表示动画，"2s"表示动画的持续时间为2秒，"ease-in-out"表示动画的缓动效果，"infinite"表示动画无限重复，"alternate"表示每个重复周期动画方向相反。

接下来，我们定义用于动画的关键帧，使用@keyframes规则，为动画指定起点和终点的属性，其中"0%"和"100%"表示动画开始和结束时的时间点（0%表示动画开始，100%表示动画结束）。在这个例子中我们修改了旋转属性，从0度开始到20度结束。

有了这些代码，就可以轻松实现来回摆动效果。使用CSS3技术，您可以轻松地为网站增添各种趣味动画效果。

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