有意思的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条)

刀客源码 游客评论