CSS3 box-shadow实现背景动画
家电修理 2023-07-16 19:17www.caominkang.com电器维修
前言
语法 box-shado: h-shado v-shado blur spread color inset;
box-shado，向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
参数说明
ok，基础知识了解完毕，完成背景动画效果，先来预览一下。
第一步（添加多个阴影）
添加样式
.shado {
position: relative;
idth: 250px;
height: 250px;
border: 1px solid rgb(26, 18, 18);
box-sizing: border-box;
margin: 0 auto;
float: left;
overflo: hidden;
}
.shado::before {
content: "";
position: absolute;
idth: 50px;
height: 50px;
: -50px;
left: -50px;
box-shado: 50px 50px blue, 150px 50px red, 250px 50px pink,
50px 100px, 150px 100px, 250px 100px,
50px 150px, 150px 150px, 250px 150px,
50px 200px, 150px 200px, 250px 200px,
50px 250px, 150px 250px, 250px 250px;
}
这里box-shado，第一行添加3个阴影，分别用不同颜色区分，和效果图一比较你应该就懂了，用3x5个阴影块，完成250px的正方形。
第二步（平移动画）.shado::before{
...
...
animation: move 3s infinite linear;
}
@keyframes move {
25% {
transform: translate(50px);
}
50% {
transform: translate(0px);
}
75% {
transform: translate(0px);
}
100% {
transform: translate(0px);
}
}
@keyframes move {
25% {
transform: translate(50px);
color: coral;
box-shado: 50px 50px blue, 150px 50px red, 250px 50px pink,
50px 100px, 150px 100px, 250px 100px,
50px 150px, 150px 150px, 250px 150px,
50px 200px, 150px 200px, 250px 200px,
50px 250px, 150px 250px, 250px 250px;
}
50% {
transform: translate(0px);
color: bron;
border-radius: 0;
box-shado: 50px 50px, 150px 50px, 250px 50px,
100px 100px, 200px 100px, 300px 100px,
50px 150px, 150px 150px, 250px 150px,
100px 200px, 200px 200px, 300px 200px,
50px 250px, 150px 250px, 250px 250px;
}
75% {
transform: translate(0px);
color: teal;
border-radius: 50%;
box-shado: 50px 50px, 150px 50px, 250px 50px,
100px 100px, 200px 100px, 300px 100px,
50px 150px, 150px 150px, 250px 150px,
100px 200px, 200px 200px, 300px 200px,
50px 250px, 150px 250px, 250px 250px;
}
100% {
border-radius: 0%;
box-shado: 50px 50px, 150px 50px, 250px 50px,
50px 100px, 150px 100px, 250px 100px,
50px 150px, 150px 150px, 250px 150px,
50px 200px, 150px 200px, 250px 200px,
50px 250px, 150px 250px, 250px 250px;
}
}
动画解析
1、 3s内动画分成4步（3000/4=750ms完成一个步骤）
2、 第一步整体向右平移50px
3、 第二步1,3,5行阴影回到原来的位置，2,4行位置保持不变
3、 第三步所有阴影边框变成圆角border-radius: 50%;
4、 第四步2,4行回到原来位置。
最终效果预览
上一篇：家里wifi怎么网上缴费? 下一篇：js实现文字滚动效果
空调维修
- 我的世界电脑版运行身份怎么弄出来（我的世界
- 空调抽湿是什么意思，设置抽湿的温度有什么意
- 方太燃气灶有一个打不着火 怎么修复与排查方法
- 夏季免费清洗汽车空调的宣传口号
- 清洗完空调后出现漏水现象
- iphone6能玩什么游戏（iphone6游戏）
- 如何设置电脑密码锁屏（如何设置电脑密码锁屏
- win10删除开机密码提示不符合密码策略要求
- 电脑w7显示不是正版（w7不是正版怎么解决）
- 万家乐z8热水器显示e7解决 怎么修复与排查方法
- 1匹空调多少瓦数（1匹空调多少瓦）
- 安卓手机连接电脑用什么软件好（关于安卓手机
- 电脑网页看视频卡是什么原因（爱拍看视频卡）
- 华帝燃气灶点火器一直响然后熄火怎么办：问题
- 电脑壁纸怎么换（关于电脑壁纸怎么换的介绍）
- 冬天空调的出风口应该朝什么方向（冬天空调风