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制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
CSS 文字装饰 text-decoration & text-emphasis 详解
奇妙的 CSS shapes(CSS图形)
html+css合并表格边框的示例代码
使用HTML+Css+transform实现3D导航栏的示例代码
You might like
PHP array_push 数组函数
2009/12/26 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
jQuery live
2009/05/15 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python 12306抢火车票脚本
2018/02/07 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
大学生求职推荐信
2013/11/27 职场文书
车间班组长的职责
2013/12/13 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
pytorch 实现变分自动编码器的操作
2021/05/24 Python
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫