加载1

CSS源码

.title{width: 100%;text-align: center;margin:60px 0;font-size: 18px;color: #999;
}
.loadingOne{width: 80px;height: 40px;margin: 0 auto;
}
.loadingOne span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;-webkit-animation: load 1s ease infinite;animation: load 1s ease infinite;
}
@-webkit-keyframes load{0%,100%{height: 40px;background: lightgreen;}50%{height: 70px;margin: -15px 0;background: lightblue;}
}
.loadingOne span:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;
}
.loadingOne span:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;
}
.loadingOne span:nth-child(4){-webkit-animation-delay:0.6s;animation-delay:0.6s;
}
.loadingOne span:nth-child(5){-webkit-animation-delay:0.8s;animation-delay:0.8s;
}

HTML源码

<div class="loadingOne"><span></span><span></span><span></span><span></span><span></span>
</div>

程序猿的生活：CSS元素的显示与隐藏1 赞同 · 0 评论文章

加载2

css源码

.loadingTwo{width: 150px;height: 4px;border-radius: 2px;margin: 0 auto;margin-top:100px;position: relative;background: lightgreen;-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: lightgreen;position: absolute;margin-top: -7px;margin-left:-8px;-webkit-animation: changePosition 1.04s ease-in infinite alternate;animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{0%{background: lightgreen;}100%{background: lightblue;}
}
@-webkit-keyframes changePosition{0%{background: lightgreen;}100%{margin-left: 142px;background: lightblue;}
}

HTML源码

<div class="loadingTwo"><span></span>
</div>

程序猿的生活：8个有用的 CSS 技巧:视差图像，sticky footer 等等4 赞同 · 0 评论文章

加载3

css源码

.loadingThree{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;
}
.loadingThree span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease infinite;
}
.loadingThree span:last-child{margin-right: 0px;
}
@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;}
}
.loadingThree span:nth-child(1){-webkit-animation-delay:0.13s;
}
.loadingThree span:nth-child(2){-webkit-animation-delay:0.26s;
}
.loadingThree span:nth-child(3){-webkit-animation-delay:0.39s;
}
.loadingThree span:nth-child(4){-webkit-animation-delay:0.52s;
}
.loadingThree span:nth-child(5){-webkit-animation-delay:0.65s;
}

HTML源码

<div class="loadingThree"><span></span><span></span><span></span><span></span><span></span>
</div>

程序猿的生活：CSS页面布局小技巧2 赞同 · 0 评论文章

加载4

css源码

.loadingFour{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;text-align: center;}.loadingFour span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loadingFour span:last-child{margin-right: 0px;}@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;}}.loadingFour span:nth-child(1){-webkit-animation-delay:0.13s;}.loadingFour span:nth-child(2){-webkit-animation-delay:0.26s;}.loadingFour span:nth-child(3){-webkit-animation-delay:0.39s;}.loadingFour span:nth-child(4){-webkit-animation-delay:0.52s;}.loadingFour span:nth-child(5){-webkit-animation-delay:0.65s;}.loadingTwo{width: 150px;height: 4px;border-radius: 2px;margin: 0 auto;margin-top:100px;position: relative;background: lightgreen;-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: lightgreen;position: absolute;margin-top: -7px;margin-left:-8px;-webkit-animation: changePosition 1.04s ease-in infinite alternate;animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{0%{background: lightgreen;}100%{background: lightblue;}
}
@-webkit-keyframes changePosition{0%{background: lightgreen;}100%{margin-left: 142px;background: lightblue;}
}

html源码

<div class="loadingFour"><span></span><span></span><span></span><span></span><span></span>
</div>

程序猿的生活：拒绝JavaScript，这三个CSS技巧你一定用的上​7 赞同 · 1 评论文章

加载5

css源码

.loadingFive{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;
}
.loadingFive span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-transform-origin: right bottom;-webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{margin-right: 0px;
}
@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;-webkit-transform: rotate(90deg);}
}
.loadingFive span:nth-child(1){-webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){-webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){-webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){-webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){-webkit-animation-delay:0.65s;
}.loadingTwo{width: 150px;height: 4px;border-radius: 2px;margin: 0 auto;margin-top:100px;position: relative;background: lightgreen;-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: lightgreen;position: absolute;margin-top: -7px;margin-left:-8px;-webkit-animation: changePosition 1.04s ease-in infinite alternate;animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{0%{background: lightgreen;}100%{background: lightblue;}
}
@-webkit-keyframes changePosition{0%{background: lightgreen;}100%{margin-left: 142px;background: lightblue;}
}.loadingFive{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;
}
.loadingFive span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-transform-origin: right bottom;-webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{margin-right: 0px;
}
@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;-webkit-transform: rotate(90deg);}
}
.loadingFive span:nth-child(1){-webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){-webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){-webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){-webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){-webkit-animation-delay:0.65s;
}

html源码

<div class="loadingFive"> <span></span><span></span><span></span><span></span><span></span>
</div>

程序猿的生活：仅用CSS几步实现赛博朋克2077风格视觉效果14 赞同 · 1 评论文章

加载6

css源码

.loadingSix{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;
}
.loadingSix span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: lightgreen;position: absolute;-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0.2;}
}
.loadingSix span:nth-child(1){left: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.13s;
}
.loadingSix span:nth-child(2){left: 14px;top: 14px;-webkit-animation-delay:0.26s;
}
.loadingSix span:nth-child(3){left: 50%;top: 0;margin-left: -8px;-webkit-animation-delay:0.39s;
}
.loadingSix span:nth-child(4){top: 14px;right:14px;-webkit-animation-delay:0.52s;
}
.loadingSix span:nth-child(5){right: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.65s;
}
.loadingSix span:nth-child(6){right: 14px;bottom:14px;-webkit-animation-delay:0.78s;
}
.loadingSix span:nth-child(7){bottom: 0;left: 50%;margin-left: -8px;-webkit-animation-delay:0.91s;
}
.loadingSix span:nth-child(8){bottom: 14px;left: 14px;-webkit-animation-delay:1.04s;
}

加载7

css源码

.loadingSeven{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;
}
.loadingSeven span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;-webkit-animation: loadsaven 1.04s ease infinite;
}
@-webkit-keyframes loadsaven{0%,100%{height: 40px;background: lightgreen;}50%{height: 60px;margin-top: -20px;background: lightblue;}
}
.loadingSeven span:nth-child(2){-webkit-animation-delay:0.13s;
}
.loadingSeven span:nth-child(3){-webkit-animation-delay:0.26s;
}
.loadingSeven span:nth-child(4){-webkit-animation-delay:0.39s;
}
.loadingSeven span:nth-child(5){-webkit-animation-delay:0.52s;
}

HTML源码

<div class="loadingSeven"><span></span><span></span><span></span><span></span><span></span>
</div>

加载8

css源码

.loadingEight{width: 80px;height: 80px;border-radius: 50%;margin: 0 auto;margin-top:100px;position: relative;border:5px solid lightgreen;-webkit-animation: turn 2s linear infinite;
}
.loadingEight span{display: inline-block;width: 30px;height: 30px;border-radius: 50%;background: lightgreen;position: absolute;left: 50%;margin-top: -15px;margin-left: -15px;-webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{0%{background: lightgreen;}100%{background: lightblue;}
}
@-webkit-keyframes turn{0%{-webkit-transform: rotate(0deg);border-color: lightgreen;}100%{-webkit-transform: rotate(360deg);border-color: lightblue;}
}

html源码

<div class="loadingEight"> <span></span>
</div>

八种炫酷纯CSS加载动画代码相关推荐

  1. html顺序进场动画,十六种炫酷纯css加载动画（一）

    一个好的开篇,会给你这个项目增加不少分值. 有没有遇到过打开页面加载一段时间,页面内容才加载出来.在等待加载的过程中页面却是空白页,给用户的体验特别不好,会让项目降一个档次.下面的十六种炫酷炸裂的cs ...

  2. html5 loading游戏,12种炫酷html5 svg加载loading动画特效

    12种炫酷html5 svg加载loading动画特效 刘振兴 代码分享 2015年11月23日 14182 3条评论 这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载load ...

  3. 好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件

    fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件.它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程. Bower安装 bower ...

  4. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  5. css 加载动画如何生效,CSS 加载动画

    CSS加载动画 实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...

  6. 手把手实现 CSS 加载动画（一）

    手把手实现 CSS 加载动画(一) 首先我们来看看最终首先的效果: 首先我们需要创建三个 div 分别表示这三个球以及一个放置容器: <div class="container&quo ...

  7. jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效（推荐）

    这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...

  8. 5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

    目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 box-sizing 属性 2.5 C ...

  9. 【动画消消乐】纯CSS加载/过渡动画学习笔记合集（1-50）

    Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍一下 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入 ...

最新文章

  1. Atitit.获取主板与bios序列号获取硬件设备信息  Wmi wmic 的作用
  2. 131. 直方图中最大的矩形【单调栈】
  3. 三十一、电子商务分析与服务推荐
  4. 图像锐化——基于梯度算子的五种方法
  5. pycharm 安装_pycharm安装
  6. 测视力距离5米还是3米_视力表只能看到0.3，相当于近视度数200度？
  7. 为系统扩展而采取的一些措施——缓存
  8. java 原子量_JAVA线程10 - 新特性：原子量
  9. r语言 col_R语言： GARCH模型股票交易量的研究道琼斯股票市场指数
  10. java 类型转string类型_java常用类Ｓtring与其他数据类型之间的转化
  11. 可视化设计的时候应该注意什么
  12. 超好用的截屏标注软件Snipaste
  13. python字符编码问题_python字符串的编码问题
  14. 微信公众平台接入token验证失败php,PHP开发公众号token验证失败是什么意思？其中一个原因 筋斗云网络...
  15. 两个质数互质是_两个互质数是什么意思
  16. html中显示特殊符号（附带特殊字符对应表）
  17. 【侯捷】C++ STL
  18. CodeForces 372 A. Counting Kangaroos is Fun
  19. 数据库连接池的优点和原理
  20. bing搜索PubHub发布商指南

热门文章

  1. 2021年原生JS实现韩雪冬轮播图
  2. 什么是研究用计算机系统解释图,适形铅模CADCAM系统中图像识别技术研究.pdf
  3. 国密算法：利用python进行sm3 hash算法，计算hash值，国密算法库gmssl的使用
  4. 西乡中学2021艺体生高考成绩查询,2019年西乡中学特长生评分标准
  5. 数据结构的顺序表操作集
  6. 触摸操作（单手旋转双手缩放）
  7. 以下可用作c语言中的字符常量是,C语言-第3章简单的C程序设计 练习题.doc
  8. matlab 文字版,MATLAB图书合集×110本免费奉送(All MATLAB Books Collection)文字版[PDF]
  9. PHP之thinkPHP（一）
  10. 【t042】炮击坦克