代码改变世界

纯CSS3创意loading文字特效

2015-05-19 14:14  RTdo  阅读(1334)  评论(0)    收藏  举报

 

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App，并销售到苹果应用商店中。
 
《HTML开发Mac OS App 视频教程》
 
官方QQ群：（申请加入，说是我推荐的）
  • App实践出真知 434558944       App实践出真知
  • App学习交流 452180823          App实践出真知
 

 

简要教程

这是一款非常有创意的纯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%; }
  }