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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
CSS 文字装饰 text-decoration & text-emphasis 详解
奇妙的 CSS shapes(CSS图形)
html+css合并表格边框的示例代码
使用HTML+Css+transform实现3D导航栏的示例代码
You might like
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
php array_map()函数实例用法
2021/03/03 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python rstrip()方法实例详解
2018/11/11 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
Order by的几种用法
2013/06/16 面试题
战友聚会邀请函
2014/01/18 职场文书
商业融资计划书
2014/04/29 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
毕业生个人总结
2015/02/28 职场文书
格林童话读书笔记
2015/06/30 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书