得知互动

标题: css实现叶子形状loading效果 [打印本页]

作者: swmozowtfl 时间: 2015-7-9 23:02
标题: css实现叶子形状loading效果
本文实例讲述了css实现叶子形状loading效果的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
<!doctype html>
<html>
<head>
<style type=text/css>
body{ background: #000;}
.color1{ background: #fde515;}
.color2{ background: #00def2;}
@-webkit-keyframes loadrotate{
from{ -webkit-transform:rotatez(0deg);}
to{ -webkit-transform:rotatez(360deg);}
}
@keyframes loadrotate{
from{ transform:rotatez(0deg);}
to{ transform:rotatez(360deg);}
}
#loading{ width: 100px; height: 100px; position: absolute; left:50%; top:50%; margin-left:-50px; margin-top: -50px; -webkit-animation:loadrotate 3s linear infinite; -webkit-animation-fill-mode:both; animation:loadrotate 3s linear infinite; animation-fill-mode:both;}
#loading div{ width: 20px; height:30px; position: absolute;left:40px; top:35px; -webkit-transform:rotatez(0) translatex(60px) ; opacity: 1; border-radius: 50% 0; }
#loading div:nth-child(2){-webkit-transform:rotatez(36deg) translatex(60px) ; opacity: 0.8; }
#loading div:nth-child(3){-webkit-transform:rotatez(72deg) translatex(60px); opacity: 0.6; }
#loading div:nth-child(4){-webkit-transform:rotatez(108deg) translatex(60px); opacity: 0.4;}
#loading div:nth-child(5){-webkit-transform:rotatez(144deg) translatex(60px) ; opacity: 0.2;}
#loading div:nth-child(6){-webkit-transform:rotatez(180deg) translatex(60px) ; opacity: 1; }
#loading div:nth-child(7){-webkit-transform:rotatez(216deg) translatex(60px) ; opacity: 0.8; }
#loading div:nth-child(8){-webkit-transform:rotatez(252deg) translatex(60px) ; opacity: 0.6; }
#loading div:nth-child(9){-webkit-transform:rotatez(288deg) translatex(60px) ; opacity: 0.4; }
#loading div:nth-child(10){-webkit-transform:rotatez(324deg) translatex(60px) ; opacity: 0.2; }
</style>
</head>
<body>
<div id=loading>
<div class=color1></div>
<div class=color1></div>
<div class=color1></div>
<div class=color1></div>
<div class=color1></div>
<div class=color2></div>
<div class=color2></div>
<div class=color2></div>
<div class=color2></div>
<div class=color2></div>
</div>
</body>
</html>
运行效果如下图所示：

希望本文所述对大家的web前端设计有所帮助。

更多网页制作信息请查看：网页制作

作者: wwdu926a 时间: 2015-10-29 15:25
你这样的表现，就只配这几个字：窝囊废

作者: gevaemaidovef 时间: 2015-10-29 15:25
回来了呵呵刚才在斗地主那 ~~~~

作者: alapScady 时间: 2015-10-29 15:26
哈哈 ok ~~~

作者: bqtklouu 时间: 2015-10-29 15:26
现在做什么网站好？

作者: alapScady 时间: 2016-2-5 20:43
到你的~~贴吧收藏~~~我的发言~`找

作者: tohme 时间: 2016-2-5 20:44
哎天理何在啊??

作者: wwdu926a 时间: 2016-2-5 20:44
命不能争，运可以造，弱者认命，强者抗命，能者求命，智者造命。

欢迎光临得知互动 (https://bbs.dezhifl.com/)