CSS3圓圈擴(kuò)散是一種用CSS技術(shù)實(shí)現(xiàn)的動(dòng)態(tài)效果,它能夠在頁(yè)面上創(chuàng)建出不同大小和顏色的圓形,并且能夠讓這些圓形做出擴(kuò)散、收縮、變形、跳躍等各種有趣的動(dòng)畫效果,為用戶帶來更加豐富的視覺體驗(yàn)。
/* HTML代碼 */ <div class="circle"></div> /* CSS代碼 */ .circle { position: relative; width: 100px; height: 100px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #333, 0 0 70px #333, 0 0 80px #333, 0 0 100px #333, 0 0 150px #333; animation: circle-grow 2s linear infinite; } @keyframes circle-grow { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 800px; height: 800px; opacity: 0; } }
代碼中,我們首先創(chuàng)建了一個(gè)class為“circle”的div,寬高都設(shè)為100px,border-radius為50%以創(chuàng)建一個(gè)圓。然后,我們使用box-shadow屬性來設(shè)置不同大小和顏色的圓形,并且讓它們形成了一種擴(kuò)散的效果。
最后,我們使用animation屬性來定義一個(gè)名稱為“circle-grow”的關(guān)鍵幀動(dòng)畫,讓圓擴(kuò)散的時(shí)間為2秒,呈線性變化。這個(gè)動(dòng)畫是無限循環(huán)的,因此圓會(huì)不停地?cái)U(kuò)散和收縮。
可以根據(jù)需求修改動(dòng)畫的顏色、周期、大小等參數(shù)來創(chuàng)建出不同的圓圈擴(kuò)散效果,讓網(wǎng)頁(yè)變得更加生動(dòng)有趣。