介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> & lt;/title>
& lt;风格类型=拔谋?css"比;
.spinner {
宽度:60 px;
高度:60 px;
background - color: # 67 cf22;
保证金:100 px的汽车;
-webkit-animation: rotateplane 1.2年代无限ease-in-out;
动画:rotateplane 1.2年代无限ease-in-out;
}
@-webkit-keyframes rotateplane {
0% {
-webkit-transform:角度(120 px)
}
50% {
-webkit-transform:角度(120 px) rotateY(180度)
}
100% {
-webkit-transform:角度(120 px) rotateY(180度)rotateX(180度)
}
}
@keyframes rotateplane {
0% {
变换:角度(120 px) rotateX(0度)rotateY(0度);
-webkit-transform:角度(120 px) rotateX(0度)rotateY(0度)
}
50% {
变换:角度(120 px) rotateX(-180.1度)rotateY(0度);
-webkit-transform:角度(120 px) rotateX(-180.1度)rotateY(0度)
}
100% {
变换:角度(120 px) rotateX(-180度)rotateY(-179.9度);
-webkit-transform:角度(120 px) rotateX(-180度)rotateY(-179.9度);
}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=皊pinner"祝辞& lt;/div>
& lt;/body>
& lt;/html>
小编给大家分享一下CSS实现富有创意的页面加载动画效果的方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
制作一个富有创意的页面加载(加载)动画需要用到很多CSS中的属性,比如:动画动画,变换属性等等。
实例描述:用div制作一个富有创意的正方形加载页面效果,在加载过程中,正方形沿Y轴翻转,又沿X轴翻转,具体代码如下:
看完了这篇文章,相信你对CSS实现富有创意的页面加载动画效果的方法有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
