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对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
CSS 文字装饰 text-decoration & text-emphasis 详解
奇妙的 CSS shapes(CSS图形)
html+css合并表格边框的示例代码
使用HTML+Css+transform实现3D导航栏的示例代码
You might like
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP可变函数学习小结
2015/11/29 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
angularjs实现简单的购物车功能
2017/09/21 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
家佳咖啡店创业计划书
2013/12/27 职场文书
质量负责人任命书
2014/06/06 职场文书
幸福中国演讲稿
2014/09/12 职场文书
市场总监岗位职责
2015/02/11 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
导游词之西安骊山
2019/12/20 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android