vue css动画效果旋转_HTML+CSS基础入门开发，小方块来回旋转动画特效

作者：你好赵伟 | 2024-03-27 17:22:40

踩

vue 以元素中心为原点旋转animation动画css

大家好，本篇文章分享小方块来回旋转动画特效，欢迎参考和指正。

效果图：

小方块来回旋转动画特效

HTML代码：

CSS代码：

知识点：

animation：是CSS3的动画属性，这里把animation绑定到tui-demo-2元素上，并指定该动画需要2.0秒完成，infinite则表示无限次播放该动画。

@keyframes：该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0％是动画开头，100％是动画结束。

transform：该属性应用于2D元素或3D元素的转换，允许元素发生旋转，缩放，移动，倾斜等效果。rotate定义2D旋转，可以配置旋转角度。

最后注意下浏览器兼容问题，-webkit-,-ms-或-moz-，有问题可以留言，大家一起学习HTML+CSS基础入门开发。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/325795

vue css动画效果 旋转_HTML+CSS基础入门开发，小方块来回旋转动画特效