【每日一练】21—CSS实现炫酷动画背景

原创

wx6332e0803afcf 2022-11-07 16:36:24 ©著作权

©著作权归作者所有：来自51CTO博客作者wx6332e0803afcf的原创作品，请联系作者获取转载授权，否则将追究法律责任

【每日一练】21—CSS实现炫酷动画背景_css

今天分享的这个小练习，我们在视频号上分享过，具体效果请看下面的视频：

因为在视频号的后台，有小伙伴留言说，想要这个案例的源码，所以，今天就把这个源码也分享出来了，有兴趣的小伙伴可以自行练习起来。

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;
  }
}