【每日一練】34—CSS 實(shí)現(xiàn)邊框動(dòng)畫效果
今天的這個(gè)卡片邊框動(dòng)畫效果，主要應(yīng)用在一些重要信息上，想引起用戶注意的時(shí)候，我們才會(huì)增加這樣的效果，一般情況不會(huì)添加這樣的動(dòng)效，但是，我們還是需要學(xué)會(huì)怎么實(shí)現(xiàn)它，現(xiàn)在我們就一起來(lái)看看這個(gè)項(xiàng)目的最終效果：
<html><head><title>【每日一練】34—CSS實(shí)現(xiàn)邊框動(dòng)畫效果</title></head><body><div class="box"><h2>01</h2></div><div class="box"><h2>02</h2></div><div class="box"><h2>03</h2></div><div class="box"><h2>04</h2></div></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #0e1538;}.box{position: relative;width: 300px;height: 400px;display: flex;justify-content: center;align-items: center;background: rgba(0,0,0,0.5);overflow: hidden;border-radius: 20px;margin-left:40px;}.box:before{content: '';position: absolute;width: 150px;height: 125%;background: linear-gradient(315deg,#00ccff,#d400d4);animation: animate 4s linear infinite}@keyframes animate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}.box:after{content: '';position: absolute;inset : 6px;background: #0e1538;border-radius: 15px;z-index: 2;}h2{position: relative;z-index: 2;font-size: 10em;color: #fff;z-index: 4;}
寫在最后
以上就是【每日一練】的全部?jī)?nèi)容，希望今天的小練習(xí)對(duì)你有用，如果你覺得有幫助的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
PS：昨天我們的視頻號(hào)上了一個(gè)網(wǎng)頁(yè)靜態(tài)頁(yè)面的實(shí)現(xiàn)案例，具體實(shí)現(xiàn)過程請(qǐng)看下面的視頻。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
評(píng)論
圖片
表情