这是一款非常有创意的纯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:500ms; animation-direction:alternate; animation-timing-function:ease-in-out; animation-iteration-count:infinite; -webkit-animation-name:cupcakeAnimate; -webkit-animation-duration:500ms; -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:1s; animation-direction:alternate; animation-timing-function:ease-in-out; animation-iteration-count:infinite; -webkit-animation-name:coreAnimate; -webkit-animation-duration:1s; -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%; } }