亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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ù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • 基于CSS實現(xiàn)元素融合效果

    現(xiàn)如今網頁越來越趨近于動畫,相信大家平時瀏覽網頁或多或少都能看到一些動畫效果,今天我們來做一個有意思的動畫效果,通過 css3 實現(xiàn)元素融合效果,感興趣的朋友跟隨小編
    2023-02-14
  • CSS 一行代碼實現(xiàn)頭像與國旗的融合

    在 CSS 中使用 mask 遮罩,一行代碼實現(xiàn)頭像與國旗的融合效果,那么,將一張國旗圖片與我們的頭像,快速得到想要的頭像,使用 CSS 如何簡單實現(xiàn)呢?感興趣的朋友跟隨小編一
    2021-10-21
  • html+css實現(xiàn)充電水滴融合特效代碼

    這篇文章主要介紹了html+css實現(xiàn)充電水滴融合特效代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-28
  • 純 CSS 實現(xiàn)蠟燭融化(水滴)的示例代碼

    這篇文章主要介紹了純 CSS 實現(xiàn)蠟燭融化(水滴)的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一
    2020-11-11
  • CSS 多圖片融合背景定位的應用于優(yōu)缺點分析

    萬物都是相通的, 軟件和互聯(lián)網技術也一樣. 如果圖片作為網絡資源需要每個進行連接來獲取, 那么 .js 文件和 .css 文件也是如此. 我們應該將可能放在一起的資源綁起來. 這樣
    2009-12-17
  • css實現(xiàn)交融文字效果的項目實踐

    這篇文章將介紹如何使用CSS實現(xiàn)交融文字效果,這是一種獨特的標題設計,可以增加頁面的視覺吸引力和用戶體驗。通過使用CSS的letter-spacing屬性,我們可以創(chuàng)建出字母之間交
    2023-04-27

最新評論