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

win多多多 lv.2

发布时间：2022-11-09 16:50:44 271

相关标签： # css# html# webkit

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

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

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

HTML代码：





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

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

写在最后

以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

【每日一练】21—CSS实现炫酷动画背景_公众号_02

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

文章来源： https://blog.51cto.com/u_15809510/5830067

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。