css实现叶子形状loading效果
发布时间：2015-01-30 09:28:13 作者：佚名 
我要评论
我要评论这篇文章主要为大家介绍了css实现叶子形状loading效果的方法,通过修改border-radius的参数实现的该效果,非常具有实用价值,需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
本文实例讲述了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前端设计有所帮助。
相关文章
这篇文章主要介绍了CSS 实现各种 Loading 效果附带解析过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-19
这篇文章主要介绍了CSS loading效果之 吃豆人的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2019-09-09
这篇文章主要介绍了CSS3动画之DIY Loading动画的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-27- 这是一款基于css3齿轮loading动画特效，使用font-awesome字体图标的齿轮图标作为图案，通过CSS3 animation来制作三个齿轮的运动效果。感兴趣的朋友跟随小编一起看看吧2018-09-27
CSS的animation可以做出大多数的loading效果，今天程序员之家小编给大家带来了基于CSS实现一个简单loading动画效果，非常不错，需要的朋友参考下吧2018-04-17
本篇文章主要介绍了一份纯CSS loading效果代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-16
这篇文章主要介绍了用纯CSS实现饼状Loading等待图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-23- 这篇文章主要介绍了使用CSS时间打点的Loading效果的教程,分别是基于box-shadow和基于border+background的两种实现方法,需要的朋友可以参考下2015-06-08
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，纯 css 实现 loading 加载中（多种展现形式），下面2023-02-08
最新评论