纯CSS3创意loading文字特效

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中。
 
《HTML开发Mac OS App 视频教程》
 
官方QQ群:(申请加入,说是我推荐的
  • App实践出真知 434558944       纯CSS3创意loading文字特效
  • App学习交流 452180823          纯CSS3创意loading文字特效
 
简要教程

这是一款非常有创意的纯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%; }
  
上一篇:SpringMVC中如何在网站启动、结束时执行代码(详细,确保可用)


下一篇:SpringMVC 避免IE执行AJAX时,返回JSON出现下载文件