CSS3实现Loading

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}html,body {background: #333333;}.demo {position: absolute;top: 50px;left: 50px;width: 200px;height: 200px;border: 1px solid #ffffff;margin: 150 auto;display: flex;justify-content: center;align-items: center;}.demo .shape {position: relative;width: 10px;height: 10px;display: inline-block;border: 1px solid #ffffff;margin: 0 5px;opacity: 0.5;}.demo .shape1 {background-color: blue;animation: animation1 1s ease infinite 0.0s;}.demo .shape2 {background-color: red;animation: animation1 1s ease infinite 0.25s;}.demo .shape3 {background-color: green;animation: animation1 1s ease infinite 0.5s;}.demo .shape4 {background-color: yellow;animation: animation1 1s ease infinite 0.75s;}/* 设置关键帧动画 0% ~ 100%*/@keyframes animation1 {0% {transform: scale(1);opcaity: 0.5;}50% {transform: scale(1.5);opcaity: 1;}100% {transform: scale(1);opcaity: 0.5;}}.demo2 {position: absolute;top: 50px;left: 300px;width: 200px;height: 200px;border: 1px solid #ffffff;margin: 150 auto;display: flex;justify-content: center;align-items: center;}.demo2 .con {position:absolute;width: 40px;height: 40px;/* border: 1px solid #ffffff; */}.demo2 .ball {position:absolute;top:40%;display: inline-block;width: 10px;height: 10px;background-color: #ffffff;border-radius: 50%;}.demo2 .ball1{left:0px;animation: animation2 1s ease infinite 0s;background-color:blue;}.demo2 .ball2{left:10px;background-color:red;}.demo2 .ball3{left:20px;background-color:green;}.demo2 .ball4{left:30px;animation: animation3 1s ease infinite 0.5s;background-color:yellow;}@keyframes animation2{0%{left:0px;top:40%;}25%{left:-20px;top:00%;}50%{left:0px;top:40%;}75%{left:0px;top:40%;}100%{left:0px;top:40%;}}@keyframes animation3{0%{left:30px;top:40%;}25%{left:50px;top:0%;}50%{left:30px;top:40%;}75%{left:30px;top:40%;}100%{left:30px;top:40%;}}
.demo3{position:absolute;border:1px solid white;width:200px;height:200px;top:50px;left:550px;display:flex;justify-content:center;align-items:center;
}
.demo3 .box{position:absolute;width:30px;height:30px;left:30px;animation:moveBox 6s 0s linear infinite;
}
.demo3 .face{position:absolute;width:30px;height:30px;border-radius:50%;background-color:orange;
}
.demo3 .face-top{/* 上边剪切，左侧保留（宽度-右侧剪切），上面保留（高度-下面剪切），左侧剪切 */clip:rect(0,30px,15px,0);transform:rotateZ(-30deg);/* 关键帧名 动画时长 延时 动画类型 循环方式 过渡处理*/animation:moveFaceTop 0.5s 0s linear infinite alternate;
}
.demo3 .face-bottom{clip:rect(15px,30px,30px,0);transform:rotateZ(30deg);animation:moveFaceBottom 0.5s 0s linear infinite alternate;}
.demo3 .eye{position:absolute;top:5px;left:10px;width:5px;height:5px;border-radius:50%;background-color:black;z-index:99;
}
.demo3 .beans{list-style:none;
}
.demo3 .bean{width:10px;height:10px;background-color:red;border-radius:50%;margin:0 5px;display:inline-block;
}
.demo3 .bean01{animation:moveBean 2s 0s linear infinite alternate;
}
.demo3 .bean02{animation:moveBean 2s 1s linear infinite alternate;
}
.demo3 .bean03{animation:moveBean 2s 2s linear infinite alternate;
}
@keyframes moveBean{0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}
}
@keyframes moveBox{0%{left:30px;transform:rotateY(0deg);}45%{left:150px;transform:rotateY(0deg);}50%{left:150px;transform:rotateY(180deg);}95%{left:30px;transform:rotateY(180deg);}100%{left:30px;transform:rotateY(0deg);}
}
@keyframes moveFaceTop{0%{transform:rotateZ(-30deg);}50%{transform:rotateZ(0deg);}100%{transform:rotateZ(-30deg);}
}
@keyFrames moveFaceBottom{0%{transform:rotateZ(30deg);}50%{transform:rotateZ(0deg);}100%{transform:rotateZ(30deg);}
}</style>
</head><body><div class="demo"><div class="shape shape1"></div><div class="shape shape2"></div><div class="shape shape3"></div><div class="shape shape4"></div></div><div class="demo2"><div class="con"><div class="ball ball1"></div><div class="ball ball2"></div><div class="ball ball3"></div><div class="ball ball4"></div></div></div><div class="demo3"><div class="box"><!-- <img src="./img/cap.jpg" alt=""> --><div class="eye"></div><div class='face face-top'></div><div class='face face-bottom'></div></div><ul class='beans'><li class='bean bean01'></li><li class='bean bean02'></li><li class='bean bean03'></li></ul></div>
</body>
</html>

渡一教育公开课web前端开发JavaScript精英课学习笔记（二十一）CSS3实现Loading相关推荐

渡一教育公开课web前端开发JavaScript精英课学习笔记（六）函数及作用域
函数作用域函数有个隐藏的属性[[scope]],这个属性就是作用域,其存储了运行期上下文的集合. [[scope]]存储运行期上下文集合,这些集合呈链式关系,就是作用域链. [[scope]]属性结 ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（一）前言
Mosaic浏览器 NCSA Mosaic,或简称Mosaic(马赛克),是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器,它是由伊利诺伊大学厄巴纳-香槟分校的NCSA组织在1993年 ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（二十九）JavaScript 骇客帝国
JavaScript 骇客帝国 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（二）变量类型，运算符
JavaScript引入方式内嵌 <script type = "text/javascript">document.write('hello,javascript! ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（二十六）JavaScript 打砖块
打砖块 <!DOCTYPE html> <html><head><meta charset="UTF-8"><meta nam ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（十）数组的常用方法
数组的常用方法(ES3) 以ES3.0为基础,ES5.0 在ES3基础上扩展,ES6.0 在ES5基础上扩展. 改变原数组的方法: push.pop.shift.unshift.sort.revers ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（三）条件语句，循环语句
if 条件判断语句 if(条件){ 如果条件为真时,执行的代码. } else { 如果条件为假时,执行的代码. } <script type = "text/javascript&q ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（三十二）JavaScript旋转方块
JavaScript旋转方块 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（七）对象和包装类
Js对象有三种内置对象:ECMAScript 规定的对象,如:Math String Number Boolean Function Object... 宿主对象:Js运行环境中的对象,如DOM文档 ...

渡一教育公开课web前端开发JavaScript精英课学习笔记（二十一）CSS3实现Loading

CSS3实现Loading

渡一教育公开课web前端开发JavaScript精英课学习笔记（二十一）CSS3实现Loading相关推荐

最新文章

热门文章