快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中。《HTML开发Mac OS App 视频教程》
- 土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/
- 百度网盘同步:http://pan.baidu.com/s/1jG1Q58M
- 分享 [中文纪录片]互联网时代 http://pan.baidu.com/s/1qWkJfcS
官方QQ群:(申请加入,说是我推荐的)
- App实践出真知 434558944
- App学习交流 452180823
简要教程
这是一款非常有创意的纯CSS3 loading加载文字动画特效。该loading文字特效中,字母O的内圆会不停的放大缩小,使用这个动画效果来提示用户当前的页面或任务正在加载中。
使用方法
HTML结构
该loading文字特效的HTML结构中,不动画的文字使用<span>
来制作,动画的文字使用一个三层嵌套的<div>
来制作。
< div id = "cupcake" class = "box" >
< span class = "letter" >L</ span >
< div class = "cupcakeCircle box" >
< div class = "cupcakeInner box" >
< div class = "cupcakeCore box" ></ div >
</ div ></ div >
< span class = "letter box" >A</ span >
< span class = "letter box" >D</ span >
< span class = "letter box" >I</ span >
< span class = "letter box" >N</ span >
< span class = "letter box" >G</ span >
</ div >
|
CSS样式
这个loading特效中的布局使用的是flex布局方式。IE11以下的浏览器都不支持CSS flex属性,所以布局会非常混乱。
#cupcake{ flex-direction :row;
-webkit- flex-direction :row;
-ms- flex-direction :row;
-mos- flex-direction :row;
-o- flex-direction :row;
justify-content : center ;
-webkit- justify-content : center ;
-ms- justify-content : center ;
height : 100% ;
width : 100% ;
background-color : #FFD454 ;
} .letter{ font-size : 100px ;
color : #222 ;
font-family : tahoma ;
} .box{ display : box;
display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -webkit-flex;
display : flex;
} .cupcakeCircle, .cupcakeInner, .cupcakeCore{ border-radius : 50% ;
-webkit- border-radius : 50% ;
-moz- border-radius : 50% ;
-ms- border-radius : 50% ;
} .cupcake, .letter, .cupcakeCircle, .cupcakeInner, .cupcakeCore{ flex : none ;
-webkit- flex : none ;
-moz- flex : none ;
-ms- flex : none ;
-o- flex : none ;
} .letter, .cupcakeCircle{ align-self: center ;
-webkit-align-self: center ;
-moz-align-self: center ;
-o-align-self: center ;
-ms-align-self: center ;
} .cupcakeCircle{ align-items : center ;
-ms- align-items : center ;
justify-content : center ;
-ms- justify-content : center ;
height : 100px ;
width : 100px ;
background-color : #222 ;
} |
字母的动画使用的是CSS animation来制作。动画被设置为无线循环,并使用ease-in-out
的easing效果。
.cupcakeInner{ align-self: center ;
-ms-align-self: center ;
justify-content : center ;
-ms- justify-content : center ;
height : 50% ;
width : 50% ;
background-color : #FFD454 ;
animation-name :cupcakeAnimate;
animation-duration : 500 ms;
animation-direction :alternate;
animation-timing-function :ease-in-out;
animation-iteration-count :infinite;
-webkit- animation-name :cupcakeAnimate;
-webkit- animation-duration : 500 ms;
-webkit- animation-direction :alternate;
-webkit- animation-timing-function :ease-in-out;
-webkit- animation-iteration-count :infinite;
}
.cupcakeCore{
align-self: center ;
-ms-align-self: center ;
height : 25% ;
width : 25% ;
background-color : #222 ;
animation-name :coreAnimate;
animation-duration : 1 s;
animation-direction :alternate;
animation-timing-function :ease-in-out;
animation-iteration-count :infinite;
-webkit- animation-name :coreAnimate;
-webkit- animation-duration : 1 s;
-webkit- animation-direction :alternate;
-webkit- animation-timing-function :ease-in-out;
-webkit- animation-iteration-count :infinite;
}
@-webkit-keyframes cupcakeAnimate{
to{ height : 90% ; width : 90% ; }
}
@keyframes cupcakeAnimate{
to{ height : 90% ; width : 90% ; }
}
@-webkit-keyframes coreAnimate{
to{ height : 90% ; width : 90% ; }
}
@keyframes coreAnimate{
to{ height : 90% ; width : 90% ; }
}
|