CSS3创意loading文字特效

PetitQ 其他代码 2019-1-20 2.29K 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 文字特效

已有 573 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

其他代码

CSS3创意loading文字特效

HTML 结构

CSS 样式

CSS3 创意 loading 文字特效

相关文章

Clipboard - 复制文本到剪贴板JavaScript插件

基于WEBGL的3D立方体特效

CSS3超酷页面切换过渡动画特效

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

CSS3 创意 loading 文字特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复