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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
CSS 文字装饰 text-decoration & text-emphasis 详解
奇妙的 CSS shapes(CSS图形)
html+css合并表格边框的示例代码
使用HTML+Css+transform实现3D导航栏的示例代码
You might like
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python3安装speech语音模块的方法
2018/12/24 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
六道php面试题附答案
2014/06/05 面试题
Java servlet面试题
2012/03/04 面试题
优秀员工自荐信范文
2013/10/05 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
服务员岗位职责
2014/01/29 职场文书
保护动物的标语
2014/06/11 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
MySQL 查询速度慢的原因
2021/05/25 MySQL