您好,登錄后才能下訂單哦!
這篇“CSS如何實(shí)現(xiàn)兩個(gè)元素相融效果”除了程序員外大部分人都不太理解,今天小編為了讓大家更加理解“CSS如何實(shí)現(xiàn)兩個(gè)元素相融效果”,給大家總結(jié)了以下內(nèi)容,具有一定借鑒價(jià)值,內(nèi)容詳細(xì)步驟清晰,細(xì)節(jié)處理妥當(dāng),希望大家通過(guò)這篇文章有所收獲,下面讓我們一起來(lái)看看具體內(nèi)容吧。
記得前幾年手機(jī)版淘寶左下角有個(gè)狠有意思的圓形按鈕,點(diǎn)擊后會(huì)出現(xiàn)幾個(gè)小按鈕,并且出場(chǎng)動(dòng)畫很有意思,后面才知道這種效果叫“粘滯”效果,如圖:
那這種效果到底用了什么屬性呢?答案是主要用了filter:blur()屬性,及filter:contrast()屬性配合
<style> body{ margin: 0; padding: 0; } .box{ position: relative; width: 500px; height: 500px; filter: contrast(20); /* 背景色一定要為實(shí)底色,否則兩個(gè)元素邊緣會(huì)有模糊效果 */ background-color: #fff; } .circle-big{ position: absolute; top: 20px; left: 100px; width: 100px; height: 100px; border-radius: 50%; filter: blur(6px); box-sizing: border-box; animation: toRight 3s ease-out infinite; background-color: #333; } .circle-small{ position: absolute; top: 35px; left: 220px; width: 60px; height: 60px; border-radius: 50%; filter: blur(6px); box-sizing: border-box; animation: toLeft 3s ease-out infinite; background-color: #FFFC00; } @keyframes toRight{ 50%{ left: 150px; } } @keyframes toLeft{ 50%{ left: 150px; } } </style> <div class="box"> <div class="circle-big"></div> <div class="circle-small"></div> </div>
最終效果如圖:
感謝你的閱讀,希望你對(duì)“CSS如何實(shí)現(xiàn)兩個(gè)元素相融效果”這一關(guān)鍵問(wèn)題有了一定的理解,具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì),快去試試吧,如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。