animation有几个属性 ：
duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name
animation: 3s ease-in 1s 2 reverse both paused slidein
- duration---------------持续时间 3秒
- timing-function------运动速度(http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp)
- delay-------------------延时时间 1秒
- teration-count--------重复次数 2次
- direction---------------播放方式反向(http://www.runoob.com/cssref/css3-pr-animation-direction.html)
- both---------------------为元素规定填充模式(http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp)
- play-state--------------暂停或播放动画(paused 或者 running)
- name-------------------为@keyframes 动画规定一个名称
HTML
搭建页面结构
<div class="wrap">
<div class="Loading">💗Loading💗</div>
<div class="rorateBox">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS样式
关键点都在CSS里面
/* 给最大div添加背景样式 */
.wrap {
width: 100%;
height: 1000px;
background: linear-gradient(45deg, #6fc7b5 0%, #13bdce, 20%, #0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);
background-size: 400%;
background-position: 0 100%;
position: relative;
animation: BjLoop 2s ease-in-out infinite; /* 添加背景左右变化动画 */
}
/* 让所有元素都居中 */
.wrap * {
left: 50%;
top: 50%;
position: fixed;
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
/* 给loading这几个字添加初始化样式 */
.Loading {
color: #fff;
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
animation: run ease-in-out 3s infinite; /* 添加字体变换颜色动画 */
font-size: 50px;
}
/* 给几个小圆点父元素定义宽高样式*/
.rorateBox div {
width: 300px;
height: 300px;
animation: loadingLoop 3s ease-in-out infinite; /* 添加小圆点旋转动画 */
}
/* 制作小圆点 用为元素实现圆点*/
.rorateBox div::after {
content: '';
display: inline-block;
width: 60px;
height: 60px;
background-color: #fff;
border-radius: 50%;
position: absolute;
transform: scale(0.17);
animation: loading-dot 3s ease-in-out infinite; /* 给小圆点添加放大缩小动画 */
}
/* 下面这几个都是小圆点开始的位置 */
.rorateBox div:nth-child(1) {
top: 114px;
left: -147px;
animation-delay:0s;
}
.rorateBox div:nth-child(1)::after {
right: 0px;
}
.rorateBox div:nth-child(2) {
top: -118px;
left: -116px;
animation-delay: 0.25s;
}
.rorateBox div:nth-child(2)::after {
right: 0px;
bottom: 0;
animation-delay: 0.25s;
}
.rorateBox div:nth-child(3) {
top: -125px;
left: 160px;
/* animation-delay: 0.50s; */
}
.rorateBox div:nth-child(3)::after {
left: 0px;
bottom: 0;
animation-delay: 0.50s;
}
.rorateBox div:nth-child(4) {
top: 131px;
left: 83px;
}
.rorateBox div:nth-child(4)::after {
left: 26px;
top: 0;
animation-delay: 1s;
}
/* 定义背景动画名称以及改变背景左右动画 */
@keyframes BjLoop {
0% {
background-position: 0% 100%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 100%;
}
}
/* 定义小圆点动画名称放大缩小 */
@keyframes loading-dot {
0% {
transform:scale(0.17);
}
50% {
transform:scale(0.5);
}
100% {
transform:scale(0.17);
}
}
/* 定义小圆点父元素旋转动画名称和旋转360度动画 其实是小圆点的父元素在旋转，带动子元素转动*/
@keyframes loadingLoop {
0% {
transform: translate3d(-50%,-50%,0) rotate(0deg);
}
100% {
transform: translate3d(-50%,-50%,0) rotate(360deg);
}
}
/* 定义loading几个字的变化颜色 */
@keyframes run {
%0{
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}
25%{
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee;
}
50%{
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee;
}
75%{
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee;
}
}
image.png
