收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2340|回复: 3

[教程] 【转载】CSS3加载图标的动画设计

[复制链接]
发表于 2011-10-26 18:40:48 | 显示全部楼层 |阅读模式
本帖最后由 alexlanse 于 2011-10-26 18:41 编辑

嗨,伙计们,这次我们会看到和制作三个CSS3加载图标的动画,它们可以使用在许多领域,如使用jQuery的图像预加载,我记得这些动画只能在Firefox,Safari和Chrome显示。好了,让我们看看这是怎么实现的。


查看DEMO案例

第一个CSS3加载动画实例


HTML
在这第一个动画里,创建两个DIV,这里需要感谢border-radius CSS3属性,它会让div变成圆圈
<div class="ball"></div>
<div class="ball1"></div>
CSS
CSS代码设计很简洁,只需设计你所想要的图标属性,图标的动画效果我们用transform:rotate属性来实现
.ball {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-top:5px solid rgba(0,0,0,0);
        border-left:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 35px #2187e7;
        width:50px;
        height:50px;
        margin:0 auto;
        -moz-animation:spin .5s infinite linear;
        -webkit-animation:spin .5s infinite linear;
}
.ball1 {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-top:5px solid rgba(0,0,0,0);
        border-left:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 15px #2187e7;
        width:30px;
        height:30px;
        margin:0 auto;
        position:relative;
        top:-50px;
        -moz-animation:spinoff .5s infinite linear;
        -webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(-360deg); }
}
第二个CSS3加载动画实例


HTML
第二个实例和第一个实例的DIV布局是一样的,具体不懂的地方你将在CSS里找到
<div class="circle"></div>
<div class="circle1"></div>
CSS
这里实例仅仅是旋转的动画,和第一个实例不同的地方是我们插入了一个动画,使得它有一种脉动的效果,这个效果体现在第一个圆圈里
.circle {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-right:5px solid rgba(0,0,0,0);
        border-left:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 35px #2187e7;
        width:50px;
        height:50px;
        margin:0 auto;
        -moz-animation:spinPulse 1s infinite ease-in-out;
        -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-left:5px solid rgba(0,0,0,0);
        border-right:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 15px #2187e7;
        width:30px;
        height:30px;
        margin:0 auto;
        position:relative;
        top:-50px;
        -moz-animation:spinoffPulse 1s infinite linear;
        -webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
        0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
        50% { -moz-transform:rotate(145deg); opacity:1; }
        100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
        0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
        50% { -webkit-transform:rotate(145deg); opacity:1;}
        100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
}
第三个CSS3加载动画实例


HTML
在这最好一个案例里,我们要谢谢transform:scale这个CSS3属性,它让我们得到了一个简洁的动画效果。DIV的布局比前两个案例要多一些,不过这些都是能由你来控制的。
<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>
CSS
在每个块里我们使用animation:delay这个属性,它很容易设计动画的效果
.barlittle {
        background-color:#2187e7;  
        background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
        background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
        border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
        width:10px;
        height:10px;
        float:left;
        margin-left:5px;
        opacity:0.1;
        -moz-transform:scale(0.7);
        -webkit-transform:scale(0.7);
        -moz-animation:move 1s infinite linear;
        -webkit-animation:move 1s infinite linear;
}
#block_1{
        -moz-animation-delay: .4s;
        -webkit-animation-delay: .4s;
}
#block_2{
        -moz-animation-delay: .3s;
        -webkit-animation-delay: .3s;
}
#block_3{
        -moz-animation-delay: .2s;
        -webkit-animation-delay: .2s;
}
#block_4{
        -moz-animation-delay: .3s;
        -webkit-animation-delay: .3s;
}
#block_5{
        -moz-animation-delay: .4s;
        -webkit-animation-delay: .4s;
}
@-moz-keyframes move{
        0%{-moz-transform: scale(1.2);opacity:1;}
        100%{-moz-transform: scale(0.7);opacity:0.1;}
}
@-webkit-keyframes move{
        0%{-webkit-transform: scale(1.2);opacity:1;}
        100%{-webkit-transform: scale(0.7);opacity:0.1;}
}
查看DEMO案例

英文原文:http://www.alessioatzeni.com/blo ... nimation-loop/#blog
【注:本译文为作者原创译文,转载或引用请注明出处:C酷(www.csskoo.com)】
发表于 2011-10-29 17:16:53 | 显示全部楼层
3Q 转到我空间了的http://www.boletest.cn/Space/hanbin1987/ShowTopic.aspx?id=2557
回复 支持 反对

使用道具 举报

发表于 2011-11-4 22:11:33 | 显示全部楼层
牛,收藏了先
回复 支持 反对

使用道具 举报

发表于 2011-11-5 11:30:10 | 显示全部楼层
收藏学习之用
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2020-2-26 19:15 , Processed in 0.093514 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表