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 15 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
CSS 文字装饰 text-decoration & text-emphasis 详解
奇妙的 CSS shapes(CSS图形)
html+css合并表格边框的示例代码
使用HTML+Css+transform实现3D导航栏的示例代码
You might like
php防注
2007/01/15 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
js特效,页面下雪的小例子
2013/06/17 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
js的三种继承方式详解
2017/01/21 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
护士的岗位职责
2013/12/04 职场文书
入党申请自荐书范文
2014/02/11 职场文书
相亲活动方案
2014/08/26 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
见习报告格式范文
2014/11/08 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
新学期感想
2015/08/10 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL