快速使用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: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%; }
}
|