其他
【每日一练】21—CSS实现炫酷动画背景
今天分享的这个小练习，我们在视频号上分享过，具体效果请看下面的视频：
<!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>*{ 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; }}写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号