css实现叶子形状loading效果

swmozowtfl · 发表于 2015-7-9 23:02:49

本文实例讲述了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:41

你这样的表现，就只配这几个字：窝囊废

gevaemaidovef · 发表于 2015-10-29 15:25:57

回来了呵呵刚才在斗地主那 ~~~~

alapScady · 发表于 2015-10-29 15:26:03

哈哈 ok ~~~

bqtklouu · 发表于 2015-10-29 15:26:44

现在做什么网站好？

alapScady · 发表于 2016-2-5 20:43:57

到你的~~贴吧收藏~~~我的发言~`找

tohme · 发表于 2016-2-5 20:44:06

哎天理何在啊??

wwdu926a · 发表于 2016-2-5 20:44:58

命不能争，运可以造，弱者认命，强者抗命，能者求命，智者造命。

[网页制作] css实现叶子形状loading效果

相关帖子

精彩评论7