CSS3 实现的加载动画

发布时间：2020-12-07 16:59:37 作者：Siddharth Parmar

这篇文章主要介绍了CSS3 实现的加载动画的示例代码，帮助大家更好的理解和使用CSS3，感兴趣的朋友可以了解下

实现效果

实现代码

<h1>脚本之家</h1>
<h3>JB51.net</h3>

<div class='loader loader1'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='loader loader2'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='loader loader3'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='loader loader4'>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS3

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    border-top-color: rgba(0, 0, 0, 0.5);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    border-top-color: rgba(0, 0, 255, 0.5);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    border-top-color: rgba(0, 0, 0, 0.5);
  }
}
@keyframes rotate2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    border-top-color: rgba(0, 0, 0, 0.5);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    border-top-color: rgba(0, 0, 255, 0.5);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    border-top-color: rgba(0, 0, 0, 0.5);
  }
}
* {
  box-sizing: border-box;
}

body {
  background: #f9f9f9;
  padding-bottom: 100px;
}

h1, h3 {
  display: block;
  margin: 0px auto;
  text-align: center;
  font-family: 'Tahoma';
  font-weight: lighter;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 1.5px;
}

h1 {
  margin: 50px auto;
}

.loader {
  position: relative;
  margin: 75px auto;
  width: 150px;
  height: 150px;
  display: block;
  overflow: hidden;
}
.loader div {
  height: 100%;
}

/* loader 1 */
.loader1, .loader1 div {
  border-radius: 50%;
  padding: 8px;
  border: 2px solid transparent;
  -webkit-animation: rotate linear 3.5s infinite;
          animation: rotate linear 3.5s infinite;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 255, 0.5);
}

/*loader 2  */
.loader2, .loader2 div {
  border-radius: 50%;
  padding: 8px;
  border: 2px solid transparent;
  -webkit-animation: rotate linear 3.5s infinite;
          animation: rotate linear 3.5s infinite;
  border-top-color: rgba(0, 0, 255, 0.5);
  border-left-color: rgba(0, 0, 0, 0.5);
  border-right-color: rgba(0, 0, 0, 0.5);
}

/*loader 3  */
.loader3, .loader3 div {
  border-radius: 50%;
  padding: 8px;
  border: 2px solid transparent;
  -webkit-animation: rotate linear 3.5s infinite;
          animation: rotate linear 3.5s infinite;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-left-color: rgba(0, 0, 255, 0.5);
  -webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
          animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

/* loader 4 */
.loader4, .loader4 div {
  border-radius: 50%;
  padding: 8px;
  border: 2px solid transparent;
  -webkit-animation: rotate linear 3.5s infinite;
          animation: rotate linear 3.5s infinite;
  border-radius: 50%;
  padding: 4px;
  -webkit-animation: rotate2 4s infinite linear;
          animation: rotate2 4s infinite linear;
}

div:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.loader, .loader * {
  will-change: transform;
}

以上就是CSS3 实现的加载动画的详细内容，更多关于CSS3 加载动画的资料请关注脚本之家其它相关文章！

Tag：动画加载 CSS3

纯CSS3进度条渐变加载特效代码
纯CSS3进度条渐变加载特效代码是一款基于css3 keyframes制作的创意有趣的进度条渐变加载loading动画特效代码。
2020-11-16
纯css3巫师法术加载特效代码
纯css3巫师法术加载特效代码是一款创意的漫画人物loading加载图标动画特效代码。
2020-11-12
一组纯css3加载图标动画特效代码大全
一组纯css3加载图标动画特效代码大全是一款8种不同效果的loading加载动画，基于css3 keyframes属性制作的。
2020-11-09
纯css3加载loading发光变色动画特效代码
纯css3加载发光变色动画特效是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画特效
2020-11-09
纯css3制作的发光loading图标加载动画特效源码
是一段基于纯CSS3实现的发光的圆角框里面嵌入loading图标加载动画效果代码，非常符合现在人们的审美模式，采用了平滑模板效果，非常好看，欢迎有兴趣的朋友前来下载使用
2020-10-29
CSS3实现渐变的loading加载进度条特效代码
css3 keyframes制作创意有趣的进度条渐变加载动画，loading进度条动画特效，非常不错，喜欢的朋友快来下载吧
2020-10-21
jQuery+CSS3实现的双层圆环形进度条加载动画特效
是一段基于jQuery+CSS3实现的双层圆环形状进度条加载动画特效，双层圆环中心还包含着数字百分比显示，非常不错，适应于所有网页使用，欢迎兴趣的朋友前来下载
2020-08-17
CSS3+SVG实现的电影摄影机loading加载动画效果源码
这是一款基于CSS3+SVG实现的电影摄影机loading加载动画效果源码。画面中心是一个摄像机磁带旋转的卡通动画效果，摄像机支架下方还配有loading字母标志，构成了一个比较经典
2020-03-06
纯CSS3 实现的速度仪表盘加载动画效果源码
这是一款基于纯CSS3 实现的速度仪表盘加载动画效果源码。画面中心是一个速度数值变换显示的仪表盘，仪表盘上的指针间歇的变换显示加速状态，待到加速到最大时显示回零。同
2020-02-24
CSS3实现的彩色粗线条爱心形状加载动画特效源码
是一段基于css3 animation属性制作的彩色的粗线条爱心形状加载动画特效，非常有意思，欢迎有兴趣的朋友前来下载使用
2019-11-28

CSS3 实现的加载动画

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容