CSS實現(xiàn)兩個元素相融效果(粘滯效果)
發(fā)布時間:2020-10-12 17:05:31 作者:heath_learning
我要評論

這篇文章主要介紹了CSS實現(xiàn)兩個元素相融效果(粘滯效果),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
記得前幾年手機版淘寶左下角有個狠有意思的圓形按鈕,點擊后會出現(xiàn)幾個小按鈕,并且出場動畫很有意思,后面才知道這種效果叫“粘滯”效果,如圖:
那這種效果到底用了什么屬性呢?答案是主要用了filter:blur()屬性,及filter:contrast()屬性配合
<style> body{ margin: 0; padding: 0; } .box{ position: relative; width: 500px; height: 500px; filter: contrast(20); /* 背景色一定要為實底色,否則兩個元素邊緣會有模糊效果 */ 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>
最終效果如圖:
到此這篇關于CSS實現(xiàn)兩個元素相融效果(粘滯效果)的文章就介紹到這了,更多相關CSS兩個元素相融內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
- 現(xiàn)如今網頁越來越趨近于動畫,相信大家平時瀏覽網頁或多或少都能看到一些動畫效果,今天我們來做一個有意思的動畫效果,通過 css3 實現(xiàn)元素融合效果,感興趣的朋友跟隨小編2023-02-14
- 在 CSS 中使用 mask 遮罩,一行代碼實現(xiàn)頭像與國旗的融合效果,那么,將一張國旗圖片與我們的頭像,快速得到想要的頭像,使用 CSS 如何簡單實現(xiàn)呢?感興趣的朋友跟隨小編一2021-10-21
- 這篇文章主要介紹了html+css實現(xiàn)充電水滴融合特效代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-28
- 這篇文章主要介紹了純 CSS 實現(xiàn)蠟燭融化(水滴)的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一2020-11-11
- 萬物都是相通的, 軟件和互聯(lián)網技術也一樣. 如果圖片作為網絡資源需要每個進行連接來獲取, 那么 .js 文件和 .css 文件也是如此. 我們應該將可能放在一起的資源綁起來. 這樣2009-12-17
- 這篇文章將介紹如何使用CSS實現(xiàn)交融文字效果,這是一種獨特的標題設計,可以增加頁面的視覺吸引力和用戶體驗。通過使用CSS的letter-spacing屬性,我們可以創(chuàng)建出字母之間交2023-04-27