使用 CSS3 实现超炫的 Loading（加载）动画效果

最新推荐文章于 2024-05-10 09:33:42 发布
最新推荐文章于 2024-05-10 09:33:42 发布
阅读量865 收藏 1
点赞数

Loading 动画效果一：

HTML 代码：

<div class="spinner">

  <div class="rect1"></div>

  <div class="rect2"></div>

  <div class="rect3"></div>

  <div class="rect4"></div>

  <div class="rect5"></div>

</div>

CSS 代码：

.spinner {

  margin: 100px auto;

  width: 50px;

  height: 60px;

  text-align: center;

  font-size: 10px;

}

 

.spinner > div {

  background-color: #67CF22;

  height: 100%;

  width: 6px;

  display: inline-block;

   

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;

  animation: stretchdelay 1.2s infinite ease-in-out;

}

 

.spinner .rect2 {

  -webkit-animation-delay: -1.1s;

  animation-delay: -1.1s;

}

 

.spinner .rect3 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

 

.spinner .rect4 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

 

.spinner .rect5 {

  -webkit-animation-delay: -0.8s;

  animation-delay: -0.8s;

}

 

@-webkit-keyframes stretchdelay {

  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 

  20% { -webkit-transform: scaleY(1.0) }

}

 

@keyframes stretchdelay {

  0%, 40%, 100% {

    transform: scaleY(0.4);

    -webkit-transform: scaleY(0.4);

  }  20% {

    transform: scaleY(1.0);

    -webkit-transform: scaleY(1.0);

  }

}

 

Loading 动画效果二：

HTML 代码：

<div class="spinner"></div>

CSS 代码：

.spinner {

  width: 60px;

  height: 60px;

  background-color: #67CF22;

 

  margin: 100px auto;

  -webkit-animation: rotateplane 1.2s infinite ease-in-out;

  animation: rotateplane 1.2s infinite ease-in-out;

}

 

@-webkit-keyframes rotateplane {

  0% { -webkit-transform: perspective(120px) }

  50% { -webkit-transform: perspective(120px) rotateY(180deg) }

  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

}

 

@keyframes rotateplane {

  0% {

    transform: perspective(120px) rotateX(0deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

  } 50% {

    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

  } 100% {

    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  }

}

 

Loading 动画效果三：

HTML 代码：

<div class="spinner">

  <div class="double-bounce1"></div>

  <div class="double-bounce2"></div>

</div>

CSS 代码：

.spinner {

  width: 60px;

  height: 60px;

 

  position: relative;

  margin: 100px auto;

}

 

.double-bounce1, .double-bounce2 {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background-color: #67CF22;

  opacity: 0.6;

  position: absolute;

  top: 0;

  left: 0;

   

  -webkit-animation: bounce 2.0s infinite ease-in-out;

  animation: bounce 2.0s infinite ease-in-out;

}

 

.double-bounce2 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

 

@-webkit-keyframes bounce {

  0%, 100% { -webkit-transform: scale(0.0) }

  50% { -webkit-transform: scale(1.0) }

}

 

@keyframes bounce {

  0%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 50% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

 

Loading 动画效果四：

 HTML 代码：

<div class="spinner">

  <div class="cube1"></div>

  <div class="cube2"></div>

</div>

CSS 代码：

.spinner {

  margin: 100px auto;

  width: 32px;

  height: 32px;

  position: relative;

}

 

.cube1, .cube2 {

  background-color: #67CF22;

  width: 30px;

  height: 30px;

  position: absolute;

  top: 0;

  left: 0;

   

  -webkit-animation: cubemove 1.8s infinite ease-in-out;

  animation: cubemove 1.8s infinite ease-in-out;

}

 

.cube2 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

 

@-webkit-keyframes cubemove {

  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }

  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }

  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }

  100% { -webkit-transform: rotate(-360deg) }

}

 

@keyframes cubemove {

  25% {

    transform: translateX(42px) rotate(-90deg) scale(0.5);

    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

  } 50% {

    transform: translateX(42px) translateY(42px) rotate(-179deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

  } 50.1% {

    transform: translateX(42px) translateY(42px) rotate(-180deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

  } 75% {

    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

  } 100% {

    transform: rotate(-360deg);

    -webkit-transform: rotate(-360deg);

  }

}

 

Loading 动画效果五：

HTML 代码：

<div class="spinner">

  <div class="bounce1"></div>

  <div class="bounce2"></div>

  <div class="bounce3"></div>

</div>

CSS 代码：

.spinner {

  margin: 100px auto 0;

  width: 150px;

  text-align: center;

}

 

.spinner > div {

  width: 30px;

  height: 30px;

  background-color: #67CF22;

 

  border-radius: 100%;

  display: inline-block;

  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;

  animation: bouncedelay 1.4s infinite ease-in-out;

  /* Prevent first frame from flickering when animation starts */

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

 

.spinner .bounce1 {

  -webkit-animation-delay: -0.32s;

  animation-delay: -0.32s;

}

 

.spinner .bounce2 {

  -webkit-animation-delay: -0.16s;

  animation-delay: -0.16s;

}

 

@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }

}

 

@keyframes bouncedelay {

  0%, 80%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 40% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

 

Loading 动画效果六：

HTML 代码：

<div class="spinner"></div>

CSS 代码：

.spinner {

  width: 40px;

  height: 40px;

  margin: 100px auto;

  background-color: #333;

 

  border-radius: 100%; 

  -webkit-animation: scaleout 1.0s infinite ease-in-out;

  animation: scaleout 1.0s infinite ease-in-out;

}

 

@-webkit-keyframes scaleout {

  0% { -webkit-transform: scale(0.0) }

  100% {

    -webkit-transform: scale(1.0);

    opacity: 0;

  }

}

 

@keyframes scaleout {

  0% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 100% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

    opacity: 0;

  }

}

 

Loading 动画效果七：

HTML 代码：

<div class="spinner">

  <div class="spinner-container container1">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

  <div class="spinner-container container2">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

  <div class="spinner-container container3">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

</div>

CSS 代码：

.spinner {

  margin: 100px auto;

  width: 20px;

  height: 20px;

  position: relative;

}

 

.container1 > div, .container2 > div, .container3 > div {

  width: 6px;

  height: 6px;

  background-color: #333;

 

  border-radius: 100%;

  position: absolute;

  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;

  animation: bouncedelay 1.2s infinite ease-in-out;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

 

.spinner .spinner-container {

  position: absolute;

  width: 100%;

  height: 100%;

}

 

.container2 {

  -webkit-transform: rotateZ(45deg);

  transform: rotateZ(45deg);

}

 

.container3 {

  -webkit-transform: rotateZ(90deg);

  transform: rotateZ(90deg);

}

 

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

 

.container2 .circle1 {

  -webkit-animation-delay: -1.1s;

  animation-delay: -1.1s;

}

 

.container3 .circle1 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

 

.container1 .circle2 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

 

.container2 .circle2 {

  -webkit-animation-delay: -0.8s;

  animation-delay: -0.8s;

}

 

.container3 .circle2 {

  -webkit-animation-delay: -0.7s;

  animation-delay: -0.7s;

}

 

.container1 .circle3 {

  -webkit-animation-delay: -0.6s;

  animation-delay: -0.6s;

}

 

.container2 .circle3 {

  -webkit-animation-delay: -0.5s;

  animation-delay: -0.5s;

}

 

.container3 .circle3 {

  -webkit-animation-delay: -0.4s;

  animation-delay: -0.4s;

}

 

.container1 .circle4 {

  -webkit-animation-delay: -0.3s;

  animation-delay: -0.3s;

}

 

.container2 .circle4 {

  -webkit-animation-delay: -0.2s;

  animation-delay: -0.2s;

}

 

.container3 .circle4 {

  -webkit-animation-delay: -0.1s;

  animation-delay: -0.1s;

}

 

@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }

}

 

@keyframes bouncedelay {

  0%, 80%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 40% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

 

转自：https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

不正经开发者
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
16款纯CSS3实现的loading加载动画.zip
07-04
16款纯CSS3实现的loading加载动画是一款实用的可替代GIF格式图片的CSS3加载动画代码。
使用CSS3实现超炫的Loading（加载）动画效果（转）
bachu9613的博客
11-06 309
使用CSS3实现超炫的Loading（加载）动画效果 　SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Fi...
推荐使用：CSS Spinners - 简洁优雅的加载指示器
最新发布
gitblog_00090的博客
05-10 334
推荐使用：CSS Spinners - 简洁优雅的加载指示器 项目地址:https://gitcode.com/jlong/css-spinners 1、项目介绍 在Web开发中，我们常常需要展示一些加载提示来告诉用户数据正在加载。CSS Spinners 是一个轻量级的开源库，提供了一系列由纯CSS制作的加载指示器，它们以最小的HTML标记实现，样式简洁，动画流畅，能够为你的网站或应用增添一丝专...
css加载更多动画效果,css3实现loading动画效果
weixin_39801991的博客
08-04 552
通过css3动画实现三种loading加载动画效果1：通过css3的border-radius与transform的rotate()实现效果2：通过css3动画animation的animation-delay为负值，则直接从该时间状态进行动画的功能来实现效果3：通过伪元素::bofore与::after,当animation过渡动画类型为ease时border重叠效果实现body {margin...
纯css实现 页面加载动画
java_goodstudy的博客
11-16 4092
http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
使用css3实现超炫的loading加载动画效果
09-25
总结起来，使用CSS3实现超炫的loading加载动画效果，开发者可以通过创建自定义的关键帧动画和利用变换属性来实现各种动态效果。这不仅可以提升网站或应用的视觉吸引力，还能为用户提供反馈，让他们知道内容正在加载...
8款使用 CSS3 实现超炫的 Loading（加载）的动画效果
09-25
本文给大家总结分享了8款使用 CSS3 实现超炫的 Loading（加载）的动画效果，十分的炫酷，也非常实用，这里推荐给小伙伴们，希望大家能够喜欢。
css3超炫loading加载特效.zip
07-11
"CSS3超炫loading加载特效.zip"这个压缩包文件提供了一组由CSS3技术实现的精美加载动画，旨在吸引用户注意力并减少他们等待网页内容完全加载时的不耐烦感。以下是对这些特效的详细说明： 首先，CSS3是一种强大的...
jQuery带遮罩无限循环loading加载动画插件
12-11
这是一款效果非常炫酷的jQuery带遮罩无限循环loading加载动画插件。它可以在任何元素上触发loading加载动画效果，你可以选择是否带上遮罩层。整个动画效果使用CSS3制作，形成一个圆环不断旋转，非常漂亮。
jquery css3页面滚动加载区块动画特效
10-24
jquery css3页面滚动加载区块动画特效
CSS3圆环旋转加载loading动画特效
06-11
这是一款简单好看的CSS3圆环旋转加载loading动画特效，纯CSS3实现多层圆环页面加载动画效果。
CSS3小球循环转圈加载特效.zip
07-04
CSS3小球循环转圈加载特效是一款不规则的转圈，有5个小球互相撞击转圈来实现这款Loading动画特效。
28种CSS3炫酷loading页面加载动画特效代码
05-30
28酷炫吊的CSS3加载效果特效动画代码，分分钟让你的加载超乎你的想象
CSS：加载中转圈动画效果
Bule_daze的博客
03-27 3012
<div class="donut"></div> @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .donut { display: inline-block; borde...
炫酷loading等你挑选.css-spinners
Dark_programmer的博客
09-01 315
css-spinners一、css-spinners二、项目里使用 一、css-spinners 【git地址】 【在线展示】 二、项目里使用 1.引入需要的样式 <head> <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinner.css" type="text/css"> <link rel="stylesheet" href="http://css-spinners.com/
纯css 加载动画
weixin_54255895的博客
03-20 549
【代码】纯css 加载动画。
CSS3 实现 loading 动画效果
求知若饥，谦卑若愚
05-26 1830
CSS3 实现 loading 效果
css3实现loading点的加载动画
06-10
可以使用CSS3的伪元素和动画属性来实现loading点的加载动画，以下是一个简单的示例： HTML代码： ```html <div class="loading"> <div></div> <div></div> <div></div> ``` CSS代码： ```css .loading { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值