簡單的下雨效果
前言
最近在b站上看到一個下雨效果的視頻，感覺思路很清奇，我也按照自己的思路做了一個簡單的下雨效果。
由於我制作GIF圖片的工具最多只支持制作33FPS的GIF圖，所以看起來可能有一點點卡頓，實際的效果比圖片還是要好一些的,點擊這里可以在線查看效果。
思路
制作背景
首先給body中添加一個id為rain的div，並通過背景顏色線性漸變得到天空-地平線-海面的效果。
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>簡單的下雨效果</title>
</head>
<body>
<div id="rain"></div>
</body>
</html>
#rain {
position: relative;
height: 100%;
background: linear-gradient(#333,#999 ,#1f4794);
background-repeat: no-repeat;
background-size: 100% 100%;
}
制作雨滴
通過設置背景顏色徑向漸變得到圓形的水滴，再將其沿Y軸進行旋轉得到橢圓形的水滴，最后給其添加水滴下落的動畫效果。
.raindrop {
display: inline-block;
position: absolute;
top: 0;
left: 150px;
width: 5px;
height: 5px;
background: radial-gradient(#8fd4fc, #52b1f2, #0599fc);
border-radius: 5000px;
transform: rotateY(45deg);
animation: raindrop .8s;
}
@keyframes raindrop {
0% {top:5%;}
10% {top:10%;}
20% {top:20%;}
30% {top:30%;}
40% {top:40%;}
50% {top:50%;}
60% {top:60%;}
70% {top:70%;}
80% {top:80%;}
90% {top:90%;}
100% {top:95%;}
}
動態添加大批量的雨滴
通過appendChild添加隨機位置的雨滴節點，並隨機在400ms~750ms之間通過removeChild將其移除。
let clientWidth;
let clientHeight;
window.onload = function onload(){
let rain = document.getElementById('rain');
clientWidth = document.body.clientWidth;
clientHeight = document.body.clientHeight;
function dorpRain(){
setTimeout(() => {
if(typeof clientWidth !== 'undefined' && null !== clientWidth){
let el = document.createElement('div');
el.setAttribute('class', 'raindrop');
el.style.left = parseInt(Math.random() * clientWidth, 10) + 'px';
rain.appendChild(el);
setTimeout(() => {
rain.removeChild(el);
}, parseInt(400 + Math.random() * 350, 10))
}
dorpRain();
}, parseInt(10 + Math.random() * 10, 10))
}
dorpRain();
}
制作波紋效果
通過背景透明和圓形邊框得到圓形的環，再將其沿X軸進行旋轉得到橢圓形的環，最后給其添加環逐漸擴大的動畫效果。
.ripple {
display: inline-block;
position: absolute;
top: 60vh;
left: 50vh;
border: 2px solid #8fd4fc;
border-radius: 5000px;
background: rgba(0, 0, 0, 0);
transform: rotateX(72deg);
animation: ripple .6s;
}
@keyframes ripple {
0% {
width: 2px;
height: 2px;
}
10% {
width: 4px;
height: 4px;
}
20% {
width: 6px;
height: 6px;
}
30% {
width: 8px;
height: 8px;
}
40% {
width: 10px;
height: 10px;
}
50% {
width: 12px;
height: 12px;
}
60% {
width: 14px;
height: 14px;
}
70% {
width: 16px;
height: 16px;
}
80% {
width: 18px;
height: 18px;
}
90% {
width: 20px;
height: 20px;
}
100% {
width: 22px;
height: 22px;
}
}
動態添加大批量的波紋
通過appendChild添加隨機位置的雨滴節點，並在動畫效果過后通過removeChild將其移除。
let clientWidth;
let clientHeight;
window.onload = function onload(){
let rain = document.getElementById('rain');
clientWidth = document.body.clientWidth;
clientHeight = document.body.clientHeight;
function ripple(){
setTimeout(() => {
if(typeof clientWidth !== 'undefined' && null !== clientWidth && typeof clientHeight !== 'undefined' && null !== clientHeight){
let el = document.createElement('div');
el.setAttribute('class', 'ripple');
el.style.left = parseInt(Math.random() * clientWidth, 10) + 'px';
el.style.top = parseInt(clientHeight / 100 * 50 + (Math.random() * (clientHeight / 100 * 50)), 10) + 'px';
rain.appendChild(el);
setTimeout(() => {
rain.removeChild(el);
}, 600)
}
ripple();
}, parseInt(10 + Math.random() * 10, 10))
}
ripple();
}
細節
最后再完善一些細節，比如window.onresize監聽窗口變化以及overflow: hidden隱藏超出屏幕外的內容等等。
#rain {
position: relative;
height: 100%;
overflow: hidden;
background: linear-gradient(#333,#999 ,#1f4794);
background-repeat: no-repeat;
background-size: 100% 100%;
}
let clientWidth;
let clientHeight;
window.onresize = function onresize(){
clientWidth = document.body.clientWidth;
clientHeight = document.body.clientHeight;
}
結尾
筆者才疏學淺，慌忙之下難免有遺漏或是疏忽，如有錯誤之處，還望各位看官不吝賜教，筆者在此感謝。
最終的代碼我放在簡單的下雨效果。
作者：Fatman
博客園地址：https://www.cnblogs.com/liujingjiu
CSDN地址：https://blog.csdn.net/qq_35508835
版權歸 Fatman所有，歡迎保留原文鏈接進行轉載：)