0 0 6 2 - 三点唤醒Loading动画 - 2.0
本帖最后由 不二如是 于 2021-8-11 09:37 编辑在61我们介绍了“拖尾”的玩法。
算是animation的@keyframes load-effect简单玩法，这次分享一个更有意思的～
对了，安利一下，border-radius不会的，请点这里
本帖的重点是“box-shadow”高级玩法，入门请看 0 0 3 3 - Shadow之块状元素阴影
本次演示单位用em，1em = 16px。
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3帧动画</title>
<style type="text/css">
body{
background: #000;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -8888em;
box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;
}
</style>
</head>
<body>
<div class="load">鱼C-不二如是</div>
</body>
</html>
效果图：
不是说好了box-shadow是负责设置阴影的吗？！
那这三个圈，咋来的？
先憋着急，为load添加一个背景色
打个广告，看到WebStorm的编辑器的性感了嘛？！欲知更多详情，请点这里
效果图：
其实这三个白点仍然是box-shadow生成的三个阴影。
只不过是颜色是白色，并且由于本尊通过border-radius设置为圆形，他们也是圆形了。
box-shadow的有5个属性值，所以干了五件事：
☆第一个参数（3em，6em，9em），代表距离左侧的水平位移距离。
☆第二个参数（2em，2em，2em），代表距离上侧的纵向移动距离。
☆第三个参数（0，0，0），代表清晰度，0则没有模糊效果。
☆第四个参数（1.5em，0，-0.01em），代表圆点大小，1.5em表示将阴影外扩3/2宽度。
☆第五个参数（#FFF，#FFF，#FFF），设置颜色。
这四个参数就是本帖的重点！
现在只要在@keyframe load-effect{}中多次设置box-shadow不就可以产生渐变效果了吗？！
注释掉box-shadow，完成代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>n帧动画</title>
<style type="text/css">
body{
background: #000;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -8888em;
/*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
/*background: #8C0044;*/
animation: load-effect 0.99s infinite linear;
}
@keyframes load-effect {
0%{
box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
}
25%{
box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
}
50%{
box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
}
75%{
box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
}
100%{
box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
}
}
</style>
</head>
<body>
<div class="load">鱼C-不二如是</div>
</body>
</html>
效果图：
在animation动画中，分别定义0%、25%、50%、75%、100%五种动画状态。
顺便多加了多加了个点，4个点颜色各不相同。
同一行，不同列的大小变化都遵循：
->1->0.5em->0->-0.5em->
每个值在同一行只出现一次，列可以重复。
相信聪明如你，一点就透～
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 交作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3帧动画</title>
<style type="text/css">
body{
background: #000;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
animation: load-effect 0.99s infinite linear;
/*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
/* ☆第一个参数，代表距离左侧的水平位移距离。
☆第二个参数，代表距离上侧的纵向移动距离。
☆第三个参数，代表清晰度，0则没有模糊效果。
☆第四个参数，代表圆点大小，1.5em表示将阴影外扩3/2宽度。
☆第五个参数，设置颜色。
*/
}
@keyframes load-effect {
0%{
box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
}
25%{
box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
}
50%{
box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
}
75%{
box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
}
100%{
box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
}
}
</style>
</head>
<body>
<div class="load"></div>
</body>
</html> 交作业！
交作业：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3帧动画</title>
<style type="text/css">
body{
background: #000;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -8888em;
/*
☆第一个参数（3em，6em，9em），代表距离左侧的水平位移距离。
☆第二个参数（2em，2em，2em），代表距离上侧的纵向移动距离。
☆第三个参数（0，0，0），代表清晰度，0则没有模糊效果。
☆第四个参数（1.5em，0，-0.01em），代表圆点大小，1.5em表示将阴影外扩3/2宽度。
☆第五个参数（#FFF，#FFF，#FFF），设置颜色。
*/
animation:load-effect 0.99s infinite linear;
}
@keyframes load-effect{
0%{
box-shadow: 3em 2em 10px 1em #FCC,6em 2em 10px 0.5em #9F9,9em 2em 10px 0 #CCF,12em 2em 10px -0.5em #F7F;
}
25%{
box-shadow: 3em 2em 10px 0.5em #FCC,6em 2em 10px 0 #9F9,9em 2em 10px -0.5em #CCF,12em 2em 10px 1em #F7F;
}
50%{
box-shadow: 3em 2em 10px 0 #FCC,6em 2em 10px -0.5em #9F9,9em 2em 10px 1em #CCF,12em 2em 10px 0.5em #F7F;
}
75%{
box-shadow: 3em 2em 10px -0.5em #FCC,6em 2em 10px 1em #9F9,9em 2em 10px 0.5em #CCF,12em 2em 10px 0 #F7F;
}
100%{
box-shadow: 3em 2em 10px 1em #FCC,6em 2em 10px 0.5em #9F9,9em 2em 10px 0 #CCF,12em 2em 10px -0.5em #F7F;
}
}
</style>
</head>
<body>
<div class="load">鱼C-不二如是</div>
</body>
</html>
webstorm确实很强大，两天就帮我养成了忘写分号的好习惯{:10_250:}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0062-3帧动画</title>
<style type="text/css">
body{
background: #000;
}
.load{
font-size: 33px;/*都™ -8888em了，还要设置字体大小干嘛*/
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -8888em;
/*background: #45ccd6;*/
/*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.3em #FFF;*/
animation: loading 1s infinite linear;
}
@keyframes loading
{
0%
{
box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0 0.2em #F7F;
}
25%
{
box-shadow: 3em 2em 0.5em 1em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0 0.2em #F7F;
}
50%
{
box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0.5em 1em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0 0.2em #F7F;
}
75%
{
box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0.5em 1em #CCF,12em 2em 0 0.2em #F7F;
}
100%
{
box-shadow: 3em 2em 0 0.2em #FCC,6em 2em 0 0.2em #9F9,9em 2em 0 0.2em #CCF,12em 2em 0.5em 1em #F7F;
}
}
</style>
</head>
<body>
<div class="load">鱼C-STmove</div>
</body>
</html>
交作业
<!DOCTYPE html>
<html>
<head>
<title>三点打开loading</title>
<meta charset="utf-8">
<style type="text/css">
@keyframes loading{
0%{
box-shadow: 2em 2em 0 -0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 0.5em #fff;
}
12.5%{
box-shadow: 2em 2em 0 0em #fff, 8em 2em 0 0.5em #fff, 14em 2em 0 1em #fff;
}
25%{
box-shadow: 2em 2em 0 0.5em #fff, 8em 2em 0 1em #fff, 14em 2em 0 1.5em #fff;
}
37.5%{
box-shadow: 2em 2em 0 1em #fff, 8em 2em 0 1.5em #fff, 14em 2em 0 1em #fff;
}
50%{
box-shadow: 2em 2em 0 1.5em #fff, 8em 2em 0 1em #fff, 14em 2em 0 0.5em #fff;
}
62.5%{
box-shadow: 2em 2em 0 1em #fff, 8em 2em 0 0.5em #fff, 14em 2em 0 0em #fff;
}
75%{
box-shadow: 2em 2em 0 0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 -0.5em #fff;
}
87.5%{
box-shadow: 2em 2em 0 0em #fff, 8em 2em 0 -0.5em #fff, 14em 2em 0 0em #fff;
}
100%{
box-shadow: 2em 2em 0 -0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 0.5em #fff;
}
}
body{
background: #000;
}
.load{
box-sizing: border-box;
width: 2.0em;
height: 2.0em;
border-radius: 50%;
background: #f0f;
text-indent: -999px;
box-shadow: box-shadow: 2em 2em 0 -0.5em #fff, 8em 2em 0 0em #fff, 14em 2em 0 0.5em #fff;
animation: loading 1.3s infinite linear;
}
</style>
</head>
<body>
<div class="load">loading</div>
</body>
</html>
lei 了 lei 了 {:10_266:}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3帧动画</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background: #000;
}
.load {
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -8888em;
animation:flash 5s infinite linear;
}
@keyframes flash{
0% {
box-shadow:3em 2em 0 1em rgba(156,136,255,1),
6em 2em 00.5em rgba(0,168,255,1),
9em 2em 0 0em rgba(232,65,24,1),
12em 2em 0 -0.5em rgba(76,209,55,1)
}
25% {
box-shadow:3em 2em 0 0.5em rgba(156,135,255),
6em 2em 0 0em rgba(0,168,255),
9em 2em 0-0.5em rgba(232,65,24),
12em 2em 0 1em rgba(76,209,55)
}
50% {
box-shadow:3em 2em 0 0em rgba(156,136,255),
6em 2em 0-0.5em rgba(0,168,255),
9em 2em 0 1em rgba(232,65,24),
12em 2em 0 0.5em rgba(76,209,55)
}
75% {
box-shadow:3em 2em 0-0.5em rgba(156,136,255),
6em 2em 0 1em rgba(0,168,255),
9em 2em 0 0.5em rgba(232,65,24),
12em 2em 0 0em rgba(76,209,55)
}
100% {
box-shadow:3em 2em 0 1em rgba(156,136,255),
6em 2em 0 0.5em rgba(0,168,255),
9em 2em 0 0em rgba(232,65,24),
12em 2em 0-0.5em rgba(76,209,55)
}
}
</style>
</head>
<body>
<div class="load">让编程改变世界</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>n帧动画</title>
<style type="text/css">
body{
background: #000;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -8888em;
/*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
/*background: #8C0044;*/
animation: load-effect 0.99s infinite linear;
}
@keyframes load-effect {
0%{
box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
}
25%{
box-shadow: 3em 2em 0 0.5em #FCC,6em 2em 0 0 #9F9,9em 2em 0 -0.5em #CCF,12em 2em 0 1em #F7F;
}
50%{
box-shadow: 3em 2em 0 0 #FCC,6em 2em 0 -0.5em #9F9,9em 2em 0 1em #CCF,12em 2em 0 0.5em #F7F;
}
75%{
box-shadow: 3em 2em 0 -0.5em #FCC,6em 2em 0 1em #9F9,9em 2em 0 0.5em #CCF,12em 2em 0 0 #F7F;
}
100%{
box-shadow: 3em 2em 0 1em #FCC,6em 2em 0 0.5em #9F9,9em 2em 0 0 #CCF,12em 2em 0 -0.5em #F7F;
}
}
</style>
</head>
<body>
<div class="load">鱼C-不二如是</div>
</body>
</html>
页:
[1]