HTML+CSS网页设计，小方块永久旋转的动画特效

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

效果图：

HTML代码：

<div class='tui-demo-1'></div>

CSS代码：

<style type="text/css">
.tui-demo-1 {
 width: 100px;
 height: 100px;
 background: #FF5722;
 margin: 50px auto;
 animation: tui-demo-1 1.0s infinite;
}
@keyframes tui-demo-1 {
 0% {
 transform: perspective(180px) rotateX(0deg) rotateY(0deg);
 }
 100% {
 transform: perspective(180px) rotateX(0deg) rotateY(180deg);
 }
}
</style>

知识点：

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

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

transform：该属性应用于2D元素或3D元素的转换，允许元素发生旋转，缩放，移动，倾斜等效果。这里的perspective允许改变3D元素的透视图，且只影响3D元素的转换。rotateX表示沿着X轴作3D旋转，rotateY表示沿着Y轴作3D旋转。

最后注意下浏览器兼容问题，animation，transform等可再创建-webkit-,-ms-或-moz-配置。如：-webkit-animation: tui-demo-1 1.0s infinite;

有问题可以留言，大家一起学习HTML+CSS网页设计。