CSS实现炫酷动画背景

最新推荐文章于 2024-06-20 11:21:40 发布

Cheng-Dashi

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量2.6k

点赞数 1

文章标签： css 学习

本文链接：https://blog.csdn.net/m0_61643133/article/details/127829211

版权

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

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

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