css3 随风飘动

CSS3中的动画效果可以为网页增添趣味和活力，其中最受欢迎的效果之一就是随风飘动的动画效果。

通过以下CSS代码，我们可以为网页元素添加随风飘动的效果。

.float {
    animation: float 2s ease-in-out infinite;
    transform-origin: center;
}
@keyframes float {
0% {
    transform: translatey(0px);
}
50% {
    transform: translatey(-20px);
}
100% {
    transform: translatey(0px);
}
}
    

在上面的代码中，我们使用了CSS3的animation属性，为元素添加了float动画，持续时间是2秒钟，动画效果缓慢出现和消失，重复无限次。我们同时还通过transform-origin属性将变换的中心点设置为中心。

接下来，我们通过关键帧动画（@keyframes）来实现随风飘动的效果。在动画开始时（0%），元素不做任何变换，随后在50%时，元素向上移动20px，最后回到初始位置（100%）。

最后，在HTML中写入以下代码，为元素添加类名float即可启用这个效果。

div class="float">
    随风飘动的元素/div>
    

现在，你的网页元素已经实现了随风飘动的动画效果，感受一下这个效果给网页带来的活力吧！

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