各类加载loading动画效果

最新推荐文章于 2024-07-24 10:22:02 发布

majun0007

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量4.1w

点赞数 37

分类专栏：（CSS中级篇）网页效果汇总个人作品汇总（CSS中级篇）网页纯CSS绘制效果绘汇总文章标签： CSS 动画 CSS3 loading动画

本文链接：https://blog.csdn.net/majun0007/article/details/54999941

版权

本文介绍了四个使用CSS3实现的创新加载动画效果，包括不同形状和颜色的动画，展示了如何通过CSS3的动画属性和伪元素创建动态的loading效果。

摘要由CSDN通过智能技术生成

效果一：

一、HTML

<div class="loader">Loading...</div>

二、CSS

/*绿色背景*/

body {
background:#4ea980;
margin:50px;
}

/*纯白色圈*/
.loader {
   text-indent: -9999em;
   position: relative;
   width: 200px;
   height: 200px;
   box-shadow: inset 0 0 0 15px #FFF;
   border-radius: 50%;
}
.loader::before {
   position: absolute;
   content: '';
   width: 100px;
   height: 200px;
   background: #4ea980;

   /*半圆*/
   border-radius: 0 200px 200px 0;
   left: 100px;

   /*原点从（0,0）移至圆心处（0,100），绕圆心旋转*/
   transform-origin: 0px 100px;
   animation: load-effect 2s infinite linear;
}

/*最上层（即::before之前）绘制透明白色圆环*/
.loader::after {
   position: absolute;
   content: '';
   width: 200px;
   height: 200px;
   border-radius: 50%;
   left: 0;
   box-shadow: inset 0 0 0 15px rgba(255,255,255,.2);
}

/*动画：旋转360°*/
@keyframes load-effect {
   0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}