效果图：
小方块来回旋转动画特效
HTML代码：
<div class="tui-demo-2"></div>CSS代码：
<style type="text/css">
.tui-demo-2 {
width: 100px;
height: 100px;
margin: 50px auto;
background: #FFB800;
animation: tui-demo-2 2.0s infinite;
}
@keyframes tui-demo-2 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
}
}
</style>知识点：
animation：是CSS3的动画属性，这里把animation绑定到tui-demo-2元素上，并指定该动画需要2.0秒完成，infinite则表示无限次播放该动画。
@keyframes：该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0％是动画开头，100％是动画结束。
transform：该属性应用于2D元素或3D元素的转换，允许元素发生旋转，缩放，移动，倾斜等效果。rotate定义2D旋转，可以配置旋转角度。
最后注意下浏览器兼容问题，-webkit-,-ms-或-moz-，有问题可以留言，大家一起学习HTML+CSS基础入门开发。
htmlcss
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/3402/viewspace-3162342/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
2019编程语言排行榜
请登录后发表评论
登录
全部评论
