? ? ? 依然是Vue項目中的效果，GIF圖看起來有點卡頓?，但實際效果很流暢。代碼如下：

<div class="main-body"><span :class="Math.random()<0.3?'animate1':Math.random()>0.6?'animate2':'animate3'":style="{opacity:Math.random()}"v-for="i in 100"></span> </div> .main-body{background-image: url('bg.jpg');background-position: center;width: 540px;height: 540px; } .main-body span{float: left;width: 50px;height: 50px;margin: 2px; } .animate1{animation: shineSquare1 8s linear infinite; } .animate2{animation: shineSquare2 8s linear infinite; } .animate3{animation: shineSquare3 8s linear infinite; } @keyframes shineSquare1 {from{background: #0990cb}20%{background: #123496}40%{background: #003366}60%{background: #2345d7}80%{background: #044d9b}to{background: #003366} } @keyframes shineSquare2 {from{background: #003366}20%{background: #6666ff}40%{background: #003366}60%{background: #0990cb}80%{background: #044d9b}to{background: #003366} } @keyframes shineSquare3 {from{background: #003366}20%{background: #0990cb}40%{background: #003366}60%{background: #044d9b}80%{background: #2277dd}to{background: #003366} }

? ? ? 我一共定義了三組動畫，使用隨機值給不同的方塊加入不同的動畫和透明度。使用時可根據自己的需求調整動畫數量和顏色。

總結

以上是生活随笔為你收集整理的纯css实现科技感十足的方格闪烁背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。