今天分享的这个小练习，我们在视频号上分享过，具体效果请看下面的视频： 因为在视频号的后台，有小伙伴留言说，想要这个案例的源码，所以，今天就把这个源码也分享出来了，有
今天分享的这个小练习，我们在视频号上分享过，具体效果请看下面的视频：
因为在视频号的后台，有小伙伴留言说，想要这个案例的源码，所以，今天就把这个源码也分享出来了，有兴趣的小伙伴可以自行练习起来。
HTML代码：
<!doctype html>
<html>
<head>
<title>【每日一练】21—CSS实现炫酷动画背景</title>
</head>
<body>
<section>
<div class="layer layer1"></div>
<div class="layer layer2"></div>
<div class="layer layer3"></div>
<div class="layer layer4"></div>
<div class="layer layer5"></div>
<div class="layer layer6"></div>
</section>
</body>
</html>
CSS代码：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section
{
position: relative;
width: 100%;
height: 100vh;
background: #131313;
overflow: hidden;
}
.layer
{
position: absolute;
top: 50%;
left: 50%;
width: 140px;
height: 250vh;
box-shadow: inset -10px 0 40px rgba(0,0,0,1),
inset 10px 0 40px rgba(0,0,0,1),
inset -10px 0 10px rgba(255,255,255,0.25),
inset 10px 0 10px rgba(255,255,255,0.25),
0 0 50px rgba(0,0,0,1);
}
.layer.layer1
{
background: #222 radial-gradient(#6dff73 9px,#000 9px,#000 13px,transparent 13px);
background-size: 35px 35px;
animation: animateBg 2s linear infinite;
transform: translate(-50%,-50%) rotate(45deg);
z-index: 11;
}
.layer.layer2
{
background: #222 radial-gradient(#db0aff 9px,#000 9px,#000 13px,transparent 13px);
background-size: 35px 35px;
animation: animateBg2 2s linear infinite;
transform: translate(-50%,-38%) rotate(45deg);
z-index: 3;
}
.layer.layer3
{
background: #222 radial-gradient(#03a9f4 9px,#000 9px,#000 13px,transparent 13px);
background-size: 35px 35px;
animation: animateBg2 2s linear infinite;
transform: translate(-50%,-62%) rotate(45deg);
z-index: 3;
}
.layer.layer4
{
background: #222 radial-gradient(#ffc107 9px,#000 9px,#000 13px,transparent 13px);
background-size: 35px 35px;
animation: animateBg2 2s linear infinite;
transform: translate(-50%,-50%) rotate(-45deg);
z-index: 12;
}
.layer.layer5
{
background: #222 radial-gradient(#e91e63 9px,#000 9px,#000 13px,transparent 13px);
background-size: 35px 35px;
animation: animateBg 2s linear infinite;
transform: translate(-50%,-38%) rotate(-45deg);
z-index: 10;
}
.layer.layer6
{
background: #222 radial-gradient(#0f0 9px,#000 9px,#000 13px,transparent 13px);
background-size: 35px 35px;
animation: animateBg 2s linear infinite;
transform: translate(-50%,-62%) rotate(-45deg);
z-index: 10;
}
@keyframes animateBg
{
0%
{
background-position: 0 0;
}
100%
{
background-position: 35px -35px;
}
}
@keyframes animateBg2
{
0%
{
background-position: 35px -35px;
}
100%
{
background-position: 0 0;
}
}
写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
