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)如今網(wǎng)頁越來越趨近于動畫，相信大家平時瀏覽網(wǎng)頁或多或少都能看到一些動畫效果，今天我們來做一個有意思的動畫效果，通過 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)網(wǎng)技術也一樣. 如果圖片作為網(wǎng)絡資源需要每個進行連接來獲取, 那么 .js 文件和 .css 文件也是如此. 我們應該將可能放在一起的資源綁起來. 這樣2009-12-17
這篇文章將介紹如何使用CSS實現(xiàn)交融文字效果，這是一種獨特的標題設計，可以增加頁面的視覺吸引力和用戶體驗。通過使用CSS的letter-spacing屬性，我們可以創(chuàng)建出字母之間交2023-04-27
