纯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群：（申请加入，说是我推荐的）

• 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%; }

  }