摘要
看到一个b站视频，有个很棒的雨天实际效果。我也按照自己的想法做了一个简单的版本。虽然GIF图只能做33FPS，可能会有点卡，但还是很有意思的。
正文
有意思的css—简易的雨天实际效果
近期在b站上见到一个雨天实际效果的视頻，觉得构思很迥异，因为我依照自身的构思干了一个简易的雨天实际效果。
简易的雨天实际效果
序言
近期在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: 5001080x;
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: 5001080x;
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全部，热烈欢迎保存全文连接开展转截：)
关注不迷路
扫码下方二维码，关注宇凡盒子公众号，免费获取最新技术内幕！
评论0