纯CSS3创意loading文字特效
快速使用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群:(申请加入,说是我推荐的)
简要教程
这是一款非常有创意的纯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% ; } } |
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。