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

写在最后

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cheng-Dashi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值