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径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
CSS 文字装饰 text-decoration & text-emphasis 详解
奇妙的 CSS shapes(CSS图形)
html+css合并表格边框的示例代码
使用HTML+Css+transform实现3D导航栏的示例代码
You might like
PHP 的 __FILE__ 常量
2007/01/15 PHP
php中filter_input函数用法分析
2014/11/15 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
php命令行写shell实例详解
2018/07/19 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
python变量不能以数字打头详解
2016/07/06 Python
详解Python中的四种队列
2018/05/21 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
表扬信格式
2014/01/12 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
出国英文推荐信
2014/05/10 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书