css3实现的加载动画效果


Posted in HTML / CSS onApril 07, 2021

实现效果

css3实现的加载动画效果

实现代码

html

<div class='peeek-loading'>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

css3

.peeek-loading {
  background-color: #38d368;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
}

.peeek-loading ul {
  position: absolute;
  left: calc(50% - 0.7em);
  top: calc(50% - 4.2em);
  display: inline-block;
  text-indent: 2.8em;
}

.peeek-loading ul li:after,
.peeek-loading ul:after {
  width: 1.4em;
  height: 1.4em;
  background-color: #fff;
  border-radius: 100%;
}

.peeek-loading ul li:after,
.peeek-loading ul:after {
  content: "";
  display: block;
}

.peeek-loading ul:after {
  position: absolute;
  top: 2.8em;
}

.peeek-loading li {
  position: absolute;
  padding-bottom: 5.6em;
  top: 0;
  left: 0;
}

.peeek-loading li:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: 0.125s;
}

.peeek-loading li:nth-child(1):after {
  animation-delay: 0.125s;
}

.peeek-loading li:nth-child(2) {
  transform: rotate(36deg);
  animation-delay: 0.25s;
}

.peeek-loading li:nth-child(2):after {
  animation-delay: 0.25s;
}

.peeek-loading li:nth-child(3) {
  transform: rotate(72deg);
  animation-delay: 0.375s;
}

.peeek-loading li:nth-child(3):after {
  animation-delay: 0.375s;
}

.peeek-loading li:nth-child(4) {
  transform: rotate(108deg);
  animation-delay: 0.5s;
}

.peeek-loading li:nth-child(4):after {
  animation-delay: 0.5s;
}

.peeek-loading li:nth-child(5) {
  transform: rotate(144deg);
  animation-delay: 0.625s;
}

.peeek-loading li:nth-child(5):after {
  animation-delay: 0.625s;
}

.peeek-loading li:nth-child(6) {
  transform: rotate(180deg);
  animation-delay: 0.75s;
}

.peeek-loading li:nth-child(6):after {
  animation-delay: 0.75s;
}

.peeek-loading li:nth-child(7) {
  transform: rotate(216deg);
  animation-delay: 0.875s;
}

.peeek-loading li:nth-child(7):after {
  animation-delay: 0.875s;
}

.peeek-loading li:nth-child(8) {
  transform: rotate(252deg);
  animation-delay: 1s;
}

.peeek-loading li:nth-child(8):after {
  animation-delay: 1s;
}

.peeek-loading li:nth-child(9) {
  transform: rotate(288deg);
  animation-delay: 1.125s;
}

.peeek-loading li:nth-child(9):after {
  animation-delay: 1.125s;
}

.peeek-loading li:nth-child(10) {
  transform: rotate(324deg);
  animation-delay: 1.25s;
}

.peeek-loading li:nth-child(10):after {
  animation-delay: 1.25s;
}

.peeek-loading li {
  animation: dotAnimation 2.5s infinite;
}

@keyframes dotAnimation {
  0%, 55%, 100% {
    padding: 0 0 5.6em 0;
  }
  5%, 50% {
    padding: 2.8em 0;
  }
}
.peeek-loading li:after {
  animation: dotAnimationTwo 2.5s infinite;
}

@-webkit-keyframes dotAnimationTwo {
  0%, 55%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  5%, 50% {
    opacity: 0.5;
    transform: scale(0.5);
  }
}

以上就是css3实现的加载动画效果的详细内容,更多关于css3 加载动画的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
CSS 文字装饰 text-decoration & text-emphasis 详解
奇妙的 CSS shapes(CSS图形)
html+css合并表格边框的示例代码
使用HTML+Css+transform实现3D导航栏的示例代码
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
JS分页效果示例
2013/10/11 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
ES5和ES6中类的区别总结
2020/12/21 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python将秒数转化为时间格式的实例
2018/09/16 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
python有几个版本
2020/06/17 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
毕业生工作求职信
2014/06/30 职场文书
促销活动总结模板
2014/07/01 职场文书
代办出身证明书
2014/10/21 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
实习介绍信范文
2015/05/05 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers