源码
演示
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
搭建页面结构
Loading
CSS样式
关键点都在CSS里面
.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 { 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;
} .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);
}
}
@keyframes loadingLoop {
0% { transform: translate3d(-50%,-50%,0) rotate(0deg);
}
100% { transform: translate3d(-50%,-50%,0) rotate(360deg);
}
}
@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
作者：拯救宇宙是我的使命
链接：https://www.jianshu.com/p/04a6d181b572
