CSS3创意loading文字特效

PetitQ 其他代码 2019-1-20 2.32K 0 1

这是一款非常有创意的纯 CSS3 loading 加载文字动画特效。该 loading 文字特效中，字母 O 的内圆会不停的放大缩小，使用这个动画效果来提示用户当前的页面或任务正在加载中。

HTML 结构

该 loading 文字特效的 HTML 结构中，不动画的文字使用来制作，动画的文字使用一个三层嵌套的

也想出现在这里？联系我们吧

来制作。

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

CSS3 创意 loading 文字特效

已有 579 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

CSS3创意loading文字特效

HTML 结构

CSS 样式

CSS3 创意 loading 文字特效

相关文章

实用密码强度检测jQuery插件

图片加载loading加载层动画jQuery插件

TimeTo 倒计时插件 jQuery 插件

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

CSS3 创意 loading 文字特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复