html+css實(shí)現(xiàn)充電水滴融合特效代碼
我要評(píng)論先看效果：
前言：
這個(gè)思路是我在b站看up主Steven做的，覺得很不錯(cuò)，然后自己也弄了一個(gè)。（純css）
實(shí)現(xiàn)：
定義標(biāo)簽，有三個(gè)水滴盒子，一個(gè)圓圈盒子顯示數(shù)字，一個(gè)最底層盒子：
<div class="kuang">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="quan"></div>
<span>99%</span>
</div>
給最底層盒子基本的樣式。flex布局，這樣3個(gè)水滴暫時(shí)會(huì)垂直居中排列。
.kuang{
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(5,5,5);
filter: contrast(30);
}
filter: contrast(30);調(diào)整圖像的對(duì)比度。值是0%的話，圖像會(huì)全黑。值是100%，圖像不變。值可以超過(guò)100%，意味著會(huì)運(yùn)用更低的對(duì)比。若沒有設(shè)置值，默認(rèn)是1。
水滴的基本樣式。絕對(duì)定位，這樣3個(gè)盒子會(huì)重疊一起。
.droplet{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: fall 3s linear infinite;
opacity: 0;
}
filter: blur(20px);給圖像設(shè)置模糊。
重點(diǎn)：我們給水滴盒子模糊度，這然三個(gè)水滴盒子會(huì)呈現(xiàn)一種模糊的狀態(tài)。繼而，我們給底層盒子設(shè)置圖像對(duì)比度，這樣模糊的圖片會(huì)重新繪制輪廓，而得到下面的效果：
給要顯示數(shù)字的圓圈基本樣式。記住也要設(shè)置模糊度。這樣在圖像對(duì)比度下才會(huì)有與下落的水滴有融合的效果。
.quan{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: zhuan 3s infinite;
}
給水滴設(shè)置動(dòng)畫，讓它們從上往下落下，期間大小發(fā)生變化，這些可以自己慢慢調(diào)試，設(shè)置成自己認(rèn)為最好的效果。
@keyframes fall{
0%{
opacity: 0;
transform: scale(0.8) translateY(-500%);
}
50%{
opacity: 1;
transform: scale(0.5) translateY(-100%) ;
}
100%{
transform: scale(0.3) translateY(0px);
}
}
第2和和第3個(gè)水滴延遲時(shí)間后再播放動(dòng)畫，這樣3個(gè)水滴才會(huì)分開下落，至于幾秒可以自己慢慢調(diào)試，設(shè)置成自己認(rèn)為最好的效果。
.kuang div:nth-of-type(2){
animation-delay: 1.5s;
}
.kuang div:nth-of-type(3){
animation-delay: 2s;
}
給顯示數(shù)字的圓圈動(dòng)畫效果，讓它轉(zhuǎn)起來(lái)。期間可以讓它大小或角度發(fā)生或其它變化，具體數(shù)值可以自己慢慢調(diào)試，設(shè)置成自己認(rèn)為最好的效果。
@keyframes zhuan{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
height: 90px;
border-top-left-radius: 45%;
border-bottom-left-radius: 48%;
}
100%{
transform:scale(1) rotate(360deg);
}
}
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北極光之夜。</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.kuang{
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(5,5,5);
filter: contrast(30);
}
.droplet{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: fall 3s linear infinite;
opacity: 0;
}
.kuang div:nth-of-type(2){
animation-delay: 1.5s;
}
.kuang div:nth-of-type(3){
animation-delay: 2s;
}
@keyframes fall{
0%{
opacity: 0;
transform: scale(0.8) translateY(-500%);
}
50%{
opacity: 1;
transform: scale(0.5) translateY(-100%) ;
}
100%{
transform: scale(0.3) translateY(0px);
}
}
.quan{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: zhuan 3s infinite;
}
@keyframes zhuan{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
height: 90px;
border-top-left-radius: 45%;
border-bottom-left-radius: 48%;
}
100%{
transform:scale(1) rotate(360deg);
}
}
span{
position: absolute;
color: rgb(184, 182, 182);
font-size: 26px;
font-family: 'fangsong';
font-weight: bold;
}
</style>
</head>
<body>
<div class="kuang">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="quan"></div>
<span>99%</span>
</div>
</body>
</html>
總結(jié)：
到此這篇關(guān)于html+css實(shí)現(xiàn)充電水滴融合特效代碼的文章就介紹到這了,更多相關(guān)html 水滴融合內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
現(xiàn)如今網(wǎng)頁(yè)越來(lái)越趨近于動(dòng)畫，相信大家平時(shí)瀏覽網(wǎng)頁(yè)或多或少都能看到一些動(dòng)畫效果，今天我們來(lái)做一個(gè)有意思的動(dòng)畫效果，通過(guò) css3 實(shí)現(xiàn)元素融合效果，感興趣的朋友跟隨小編2023-02-14
CSS 一行代碼實(shí)現(xiàn)頭像與國(guó)旗的融合
在 CSS 中使用 mask 遮罩，一行代碼實(shí)現(xiàn)頭像與國(guó)旗的融合效果，那么，將一張國(guó)旗圖片與我們的頭像，快速得到想要的頭像，使用 CSS 如何簡(jiǎn)單實(shí)現(xiàn)呢？感興趣的朋友跟隨小編一2021-10-21
純 CSS 實(shí)現(xiàn)蠟燭融化(水滴)的示例代碼
這篇文章主要介紹了純 CSS 實(shí)現(xiàn)蠟燭融化(水滴)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2020-11-11
CSS實(shí)現(xiàn)兩個(gè)元素相融效果(粘滯效果)
這篇文章主要介紹了CSS實(shí)現(xiàn)兩個(gè)元素相融效果(粘滯效果),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-10-12CSS 多圖片融合背景定位的應(yīng)用于優(yōu)缺點(diǎn)分析
萬(wàn)物都是相通的, 軟件和互聯(lián)網(wǎng)技術(shù)也一樣. 如果圖片作為網(wǎng)絡(luò)資源需要每個(gè)進(jìn)行連接來(lái)獲取, 那么 .js 文件和 .css 文件也是如此. 我們應(yīng)該將可能放在一起的資源綁起來(lái). 這樣2009-12-17
css實(shí)現(xiàn)交融文字效果的項(xiàng)目實(shí)踐
這篇文章將介紹如何使用CSS實(shí)現(xiàn)交融文字效果，這是一種獨(dú)特的標(biāo)題設(shè)計(jì)，可以增加頁(yè)面的視覺吸引力和用戶體驗(yàn)。通過(guò)使用CSS的letter-spacing屬性，我們可以創(chuàng)建出字母之間交2023-04-27
