首页 / CSS3 / 8款使用 CSS3 实现超炫的 Loading（加载）的动画效果

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了8款使用 CSS3 实现超炫的 Loading（加载）的动画效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10301字，纯文字阅读大概需要15分钟。

内容图文

很棒的loading效果，收藏一下

一

HTML 代码：

复制代码

代码如下:

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);
}
}

https://jsfiddle.net/kh77oz8o/embedded/result/

二

HTML 代码：

复制代码

代码如下:

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);
}
}

https://jsfiddle.net/kh77oz8o/1/embedded/result/

三

HTML 代码：

复制代码

代码如下:

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);
}
}

https://jsfiddle.net/kh77oz8o/2/embedded/result/

四

HTML 代码：

复制代码

代码如下:

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);
}
}

https://jsfiddle.net/kh77oz8o/3/embedded/result/

五

HTML 代码：

复制代码

代码如下:

CSS 代码：

复制代码

代码如下:

.spinner {
margin: 100px auto;
width: 90px;
height: 90px;
position: relative;
text-align: center;
-webkit-animation: rotate 2.0s infinite linear;
animation: rotate 2.0s infinite linear;
}
.dot1, .dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #67CF22;
border-radius: 100%;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.dot2 {
top: auto;
bottom: 0px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-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);
}
}

https://jsfiddle.net/kh77oz8o/4/embedded/result/

六

HTML 代码：

复制代码

代码如下:

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);
}
}

https://jsfiddle.net/kh77oz8o/5/embedded/result/

七

HTML 代码：

复制代码

代码如下:

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

https://jsfiddle.net/kh77oz8o/6/embedded/result/

八

HTML 代码：

复制代码

代码如下:

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://jsfiddle.net/kh77oz8o/7/embedded/result/

以上所述就是本文分享的全部内容了，希望能够对大家熟练掌握CSS3有所帮助。

原文：http://www.jb51.net/css/300267.html

内容总结

以上是互联网集市为您收集整理的8款使用 CSS3 实现超炫的 Loading（加载）的动画效果全部内容，希望文章能够帮你解决8款使用 CSS3 实现超炫的 Loading（加载）的动画效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1168496.html

来源：【匿名】

【上一篇】使用CSS3 Media Queries实现网页自适应【下一篇】如何使用CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

更多 ►

【8款使用 CSS3 实现超炫的 Loading（加载）的动画效果】教程文章相关的互联网学习教程文章

CSS3动画效果回调处理详解

我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。1、transition对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：复制代码代码如下:<!DOCTYPE html>...

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

很棒的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: ...

css3 动画效果

css3 动画效果做css3的动画效果，w3c的文档的文档已有事例。动画事例，也是看了半天才搞出来。下面我就是结合个人理解进行介绍。最后个人做的一个动画democss3的动画事例主要需要理解animation：可以算是动画的声明部分。你可以把动画属性的内容全部写到后边，动画的属性主要有：animation-name animation-duration还有一些动画延时，动画播放次数。这些要根据动画效果进行添加。格式有：animation:animation-name animation-dur...

代码：一个简单css3动画效果demo【代码】

四行文字会逐次掉落:<style type="text/css"> @-webkit-keyframes fadeInDown1 {0% {-webkit-transform: translate3d(0, -20px, 0);transform: translate3d(0, -20px, 0);opacity: 0;}100% {-webkit-transform: none;transform: none;opacity: 1;} } .div111{background:#0099ff;width:300px;height:100px;} .div111 p{opacity:0;} .anima p:nth-of-type(1){-webkit-animation: fadeInDown1 .5s ease-in-out .5s forwards;} .anima...

animate.css 一些常用的CSS3动画效果

大家已经开始在项目中使用一些CSS3动画效果了吧，这让网站在高端浏览器上看起来很上流。animate.css是一个老外做的各种CSS3动画的合集，比较全，也很炫，大家可以参考学习一下。项目主页：http://daneden.me/animate/自定义下载样式：http://daneden.me/animate/build/git地址：https://github.com/daneden/animate.css原文：http://www.cnblogs.com/mixzo/p/4213606.html

CSS3动画效果transform【代码】【图】

1.transform浏览器支持情况也就是说目前不考虑老浏览器的话是不用加前缀的，感谢菜鸟教程：https://www.runoob.com/cssref/css3-pr-transform.htmltransform默认值none;就是不转换，不继承，js中对其更改示例：object.style.transform="rotate(7deg)"2.transform能干啥？transform属性让元素进行2D或3D转换。可以将元素：旋转，缩放，移动，倾斜等。3.transform怎么用？ transform: none|transform-functions; none是默认的，就是不...

纯CSS3实现页面loading加载动画效果（附代码）【图】

打开页面时，经常会遇到页面正在loading（加载）的情况，作为一个前端开发人员，你知道如何用CSS3实现页面加载动画效果吗？这篇文章就和大家分享一个即炫酷又实用的CSS3 loading加载动画效果的代码，有一定的参考价值，感兴趣的朋友可以看看。制作页面loading 加载动画需要用到很多CSS3中的属性，比如：animation动画，display，transform属性等等，如有不清楚的小伙伴可以看看我以前的文章，之前都有介绍过，或者访问 CSS3视频教程...

CSS3实现3D文字动画效果_文字特效

body{background:#333;} h1{font:normal 90px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409;position:absolute;top:85px;left:10px;width:300px; -moz-animation: 1s slidein; -webkit-animation: 1s slidein; -webkit-perspective: 600; -moz-perspective: 600px; } @-moz-keyframes slidein { from {top:1550px;} 85% {top:5px;} to {top:85px;} } @-webkit-keyframes slidein ...

CSS3如何实现同时执行倾斜和旋转的动画效果【图】

这篇文章通过实例代码给大家主要介绍了，如何利用CSS3实现同时执行倾斜和旋转的动画效果，文中给出了完整的实例代码，大家直接运行就可以看到效果，有需要的朋友们可以参考借鉴，下面来一起看看吧。先看看静态的效果，运行后的效果更好示例代码如下<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8" /><title>css3学习</title><style type="text/css">.d{width: 200px;height: 200px;border-radius: 50%;border: 2...

css3搜索等待动画效果代码？值得你学习

本篇文章给大家带来的内容是关于css3搜索等待动画效果代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。【相关视频推荐：Bootstrap教程】<html><head><link rel="stylesheet" href="//at.alicdn.com/t/font_720452_mhj331xuxd8.css"><style>*{margin:0;padding:0;}.load-icon{left:0;right:0;bottom:0;top:0;margin:auto;display: flex;justify-content: center;align-items: center;position:fixed;}.load-i...

CSS3如何让任意图片lowpoly动画效果的实现分享【图】

本篇文章主要介绍了CSS3实现任意图片lowpoly动画效果实例，这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放，CSS代码部分非常简单，唯一有趣的是 nth-of-type选择器的使用，这里UI设计师小伙伴...

CSS3实现倾斜和旋转动画效果【图】

这次给大家带来CSS3实现倾斜和旋转动画效果，实现CSS3倾斜和旋转动画效果的注意事项有哪些，下面就是实战案例，一起来看一下。先看看静态的效果，运行后的效果更好示例代码如下<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8" /><title>css3学习</title><style type="text/css">.d{width: 200px;height: 200px;border-radius: 50%;border: 2px solid red;border-left-color: green;border-right-color: blue;-we...

关于CSS3的animate如何实现“...”loading动画效果（二）【图】

box-shadow实现的打点效果简介box-shadow理论上可以生成任意的图形效果，当然也就可以实现点点点的loading效果了。实现原理html代码，首先需要写如下html代码以及class类名：订单提交中<span class="dotting"></span>css代码.dotting {display: inline-block; min-width: 2px; min-height: 2px;box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9+, ..., 3个点 */animation: dot 4s infinite s...

关于CSS3常用的动画效果分享【图】

CSS3常用动画效果。在做CSS3动画时, 除了原生动画以外, 经常要实现一些更复杂, 更符合物体运动规律的动画效果.像很多网站有回到顶部的功能，有的是点击按钮，瞬间就回到顶部了，有的则是匀速回到顶部，而最符合运动规律的，则是匀加速回到顶部。虽说这个功能在某种程度上来说无关紧要，但给人的体验是很不一样的。常用的动画库:Animation.cssMagic.css这些库虽然功能强大，但是很多效果往往我们用不到，如果时间允许的话，不妨自己...

使用Swiper如何制作CSS3动画效果【图】

这篇文章主要给大家介绍了关于在Swiper内如何制作CSS3动画效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。前言Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在A...

首页 / CSS3 / 8款使用 CSS3 实现超炫的 Loading（加载）的动画效果

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【8款使用 CSS3 实现超炫的 Loading（加载）的动画效果】教程文章相关的互联网学习教程文章

加载 - 相关标签

CSS3 - 技术教程分类

CSS3 - 最新教程

CSS3 - 最热教程