純 CSS 實現(xiàn)蠟燭融化(水滴)的示例代碼
發(fā)布時間：2020-11-11 17:00:39 作者：下雨收衫 
我要評論
我要評論這篇文章主要介紹了純 CSS 實現(xiàn)蠟燭融化(水滴)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
實現(xiàn)效果
實現(xiàn)思路
融化效果是利用 filfilter 的 contrast 和 blur 實現(xiàn)的。
在父元素中設置 contrast 并在子元素中設置 blur 即可實現(xiàn)兩者相融的效果。
代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水滴效果</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="hpc">下雨收衫</div> </body> </html>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
filter: contrast(20);
}
.both{
left: 0;
content: "";
width: 10px;
height: 20px;
bottom: -20px;
border-radius: 50%;
position: absolute;
background-color: #fff;
}
.hpc{
top: 80px;
left: 100px;
color: #fff;
width: 400px;
height: 107px;
font-size: 6rem;
filter: blur(3px);
font-style: italic;
position: relative;
transform: skewY(5deg);
font-family: "Comic Sans MS";
border-bottom: 10px solid #fff;
&::before{
@extend .both;
animation: move 6s ease-in-out infinite;
}
&::after{
@extend .both;
animation: move 6s 1s ease-in-out infinite;
}
@keyframes move{
70%{
bottom: -20px;
transform: translate(380px, 5px);
}
80%{
transform: translate(380px, 3px);
opacity: 1;
}
100%{
transform: translate(380px, 180px);
opacity: 0;
}
}
}
將 SCSS 轉化為 CSS 再導入即可。
到此這篇關于純 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-10-12- 萬物都是相通的, 軟件和互聯(lián)網(wǎng)技術也一樣. 如果圖片作為網(wǎng)絡資源需要每個進行連接來獲取, 那么 .js 文件和 .css 文件也是如此. 我們應該將可能放在一起的資源綁起來. 這樣2009-12-17
這篇文章將介紹如何使用CSS實現(xiàn)交融文字效果，這是一種獨特的標題設計，可以增加頁面的視覺吸引力和用戶體驗。通過使用CSS的letter-spacing屬性，我們可以創(chuàng)建出字母之間交2023-04-27
