HTML5有趣的下雨动画（雨景）制造器

Rain Machine,可以调节雨量、背景环境模式（黄昏还是夜晚）以及触发闪电动画。

html5, rain, lighting

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4095
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

function runLightning() {
        $('#one, #two, #three, #four, #five, #six, #seven, body, body.dusk').addClass('bolt-active');

}

function resetLightning() {
        $('#one, #two, #three, #four, #five, #six, #seven, body, body.dusk').removeClass('bolt-active');
        $('.lightning-button').prop('disabled', false);
    }

$('.lightning-button').on('click', function() {
        runLightning();
        setTimeout(resetLightning, 1000);
        $(this).prop('disabled', true);
    })

$('#no-rain-radio').on('click', function() {
        $('#svg_1, #svg_2, #svg_3, #svg_4, #svg_5, #svg_6, #svg_7, #svg_8, #svg_9, #svg_10, #svg_11, #svg_12, #svg_13, #svg_14, #svg_15, #svg_16, #svg_17, #svg_18, #svg_19, #svg_20, #svg_21').removeClass('animated');
        $('#light-rain-radio')
    });

$('#light-rain-radio').on('click', function() {
        $('#rain-back #svg_1, #rain-back #svg_2, #rain-back #svg_3, #rain-back #svg_4, #rain-back #svg_5, #rain-back #svg_6, #rain-back #svg_7, #rain-back #svg_8, #rain-back #svg_9, #rain-back #svg_10, #rain-back #svg_11, #rain-back #svg_12, #rain-back #svg_13, #rain-back #svg_14, #rain-back #svg_15, #rain-back #svg_16, #rain-back #svg_17, #rain-back #svg_18, #rain-back #svg_19, #rain-back #svg_20, #rain-back #svg_21, #rain-middle #svg_1, #rain-middle #svg_2, #rain-middle #svg_3, #rain-middle #svg_4, #rain-middle #svg_5, #rain-middle #svg_6, #rain-middle #svg_7, #rain-middle #svg_8, #rain-middle #svg_9, #rain-middle #svg_10, #rain-middle #svg_11, #rain-middle #svg_12, #rain-middle #svg_13, #rain-middle #svg_14, #rain-middle #svg_15, #rain-middle #svg_16, #rain-middle #svg_17').addClass('animated');
        $('#rain-forward #svg_1, #rain-forward #svg_2, #rain-forward #svg_3, #rain-forward #svg_4, #rain-forward #svg_5, #rain-forward #svg_6, #rain-forward #svg_7, #rain-forward #svg_8, #rain-forward #svg_9, #rain-forward #svg_10, #rain-forward #svg_11, #rain-forward #svg_12, #rain-forward #svg_13, #rain-forward #svg_14, #rain-forward #svg_15, #rain-forward #svg_16, #rain-forward #svg_17').removeClass('animated');
    });

$('#heavy-rain-radio').on('click', function() {
        $('#svg_1, #svg_2, #svg_3, #svg_4, #svg_5, #svg_6, #svg_7, #svg_8, #svg_9, #svg_10, #svg_11, #svg_12, #svg_13, #svg_14, #svg_15, #svg_16, #svg_17, #svg_18, #svg_19, #svg_20, #svg_21').addClass('animated');
    });

$('#no-rain-radio').on('click', function() {
        $('#label-light-rain, #label-heavy-rain').removeClass('highlighted');
        $('#label-no-rain').addClass('highlighted');
    });

$('#light-rain-radio').on('click', function() {
        $('#label-no-rain, #label-heavy-rain').removeClass('highlighted');
        $('#label-light-rain').addClass('highlighted');
    });

$('#heavy-rain-radio').on('click', function() {
        $('#label-no-rain, #label-light-rain').removeClass('highlighted');
        $('#label-heavy-rain').addClass('highlighted');
    });

$('#light-night').on('click', function() {
        $('#label-dusk').removeClass('highlighted');
        $('#label-night').addClass('highlighted');
        $('body').removeClass('dusk');
    });

$('#light-dusk').on('click', function() {
        $('#label-night').removeClass('highlighted');
        $('#label-dusk').addClass('highlighted');
        $('body').addClass('dusk');
    });
});

编译

CSS

body {
    background: #0f0f12;
    font-family: sans-serif;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-size: .8rem;
}
body.dusk {
    background: #00001e;
    /* fallback for old browsers */
    
    background: -webkit-linear-gradient(to top, #ffd89b, #00001e);
    /* Chrome 10-25, Safari 5.1-6 */
    
    background: linear-gradient(to top, #ffd89b, #00001e);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.svg {
    width: 100%;
}
.svg-container {
    height: 100vh;
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.controls {
    position: absolute;
    z-index: 1;
    margin-top: 20px;
}
.type-of-control {
    margin: 20px 0 20px 30px;
    padding: 10px;
}
.control-single {
    display: inline-block;
}
label {
    color: rgba(255, 255, 255, .5);
    margin-right: 20px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .0);
    transition: all .2s;
}
label.highlighted {
    color: rgba(255, 255, 255, .95);
    font-weight: bold;
    border: 1px solid white;
}
button {
    color: #333;
    background-color: rgba(255, 255, 255, .7);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .0);
    letter-spacing: 3px;
    text-transform: uppercase;
    font: .8rem system-ui;
    font-weight: bold;
    transition: all .2s
}
input {
    display: none;
}
input:hover,
button:hover,
label:hover {
    cursor: pointer;
}
button:hover {
    color: black;
    background-color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .0);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.0);
    border-image: initial;
}
label:hover {
    background-color: rgba(255, 255, 255, .1)
}
svg#rain-back,
svg#rain-middle,
svg#rain-forward {
    position: absolute;
}
.text {
    color: rgba(255, 255, 255, .5);
    font-family: sans-serif;
    letter-spacing: 5px;
    font-size: 20px;
}
/*lightning lines*/

#one {
    stroke-dasharray: 571;
    opacity: 0;
}
#one.bolt-active {
    animation: animationone .25s 0s 3 linear;
}
#two {
    stroke-dasharray: 641.24;
    opacity: 0;
}
#two.bolt-active {
    animation: animationtwo .25s 0s 3 linear;
}
#three {
    stroke-dasharray: 366.74;
    opacity: 0;
}
#three.bolt-active {
    animation: animationthree .25s 0s 3 linear;
}
#four {
    stroke-dasharray: 197.63;
    opacity: 0;
}
#four.bolt-active {
    animation: animationfour .25s 0s 2 linear;
}
#five {
    stroke-dasharray: 159.93;
    opacity: 0;
}
#five.bolt-active {
    animation: animationfive .25s 0.3s 3 linear;
}
#six {
    stroke-dasharray: 819.26;
    opacity: 0;
}
#six.bolt-active {
    animation: animationsix .35s 0s 3 linear;
}
#seven {
    stroke-dasharray: 417.92;
    opacity: 0;
}
#seven.bolt-active {
    animation: animationseven .25s .2s 1 linear;
}
body.bolt-active {
    animation: pop .4s .2s 2 cubic-bezier(0, .94, .73, 1);
}
body.dusk.bolt-active {
    animation: popdusk .4s .2s 2 cubic-bezier(0, .94, .73, 1);
}
/*raindrops*/

#svg_1,
#svg_2,
#svg_3,
#svg_4,
#svg_5,
#svg_6,
#svg_7,
#svg_8,
#svg_9,
#svg_10,
#svg_11,
#svg_12,
#svg_13,
#svg_14,
#svg_15,
#svg_16,
#svg_17,
#svg_18,
#svg_19,
#svg_20,
#svg_21 {
    opacity: 0;
}
#svg_11.animated,
#svg_7.animated,
#svg_20.animated {
    animation: fall 0.5s linear infinite;
    opacity: 1;
}
#svg_9.animated,
#svg_16.animated,
#svg_18.animated,
#svg_13.animated {
    animation: fall .8s linear infinite;
    opacity: 1;
}
#svg_8.animated,
#svg_14.animated,
#svg_15.animated {
    animation: fall 1.2s linear infinite;
    opacity: 1;
}
#svg_6.animated,
#svg_21.animated,
#svg_2.animated,
#svg_10.animated {
    animation: fall 1.6s linear infinite;
    opacity: 1;
}
#svg_12.animated,
#svg_1.animated,
#svg_19.animated,
#svg_3.animated {
    animation: fall 1.8s linear infinite;
    opacity: 1;
}
#svg_4.animated,
#svg_17.animated,
#svg_5.animated {
    animation: fall 2.1s linear infinite;
    opacity: 1;
}
#rain-forward #svg_4.animated,
#rain-forward #svg_12.animated {
    animation: fall .2s linear infinite;
    opacity: 1;
}
#rain-forward #svg_14.animated,
#rain-forward #svg_2.animated,
#rain-forward #svg_9.animated {
    animation: fall .4s linear infinite;
    opacity: 1;
}
#rain-forward #svg_17.animated,
#rain-forward #svg_3.animated,
#rain-forward #svg_1.animated {
    animation: fall .6s linear infinite;
    opacity: 1;
}
#rain-forward #svg_5.animated,
#rain-forward #svg_7.animated,
#rain-forward #svg_10.animated {
    animation: fall 1s linear infinite;
    opacity: 1;
}
#rain-forward #svg_6.animated,
#rain-forward #svg_8.animated,
#rain-forward #svg_11.animated {
    animation: fall 1.5s linear infinite;
    opacity: 1;
}
@keyframes animationone {
    from {
        stroke-dashoffset: 571;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes animationtwo {
    from {
        stroke-dashoffset: 641.24;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes animationthree {
    from {
        stroke-dashoffset: 366.74;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes animationfour {
    from {
        stroke-dashoffset: 197.63;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes animationfive {
    from {
        stroke-dashoffset: 159.93;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes animationsix {
    from {
        stroke-dashoffset: 819.26;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes animationseven {
    from {
        stroke-dashoffset: 417.92;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes pop {
    from {
        background: #0f0f12;
    }
    to {
        background: #211d23;
    }
}
@keyframes popdusk {
    to {
        background: rgba(0, 0, 30, .6);
        /* fallback for old browsers */
        
        background: -webkit-linear-gradient(bottom, #ffd89b, rgba(0, 0, 30, .6));
        background: -o-linear-gradient(bottom, #ffd89b, rgba(0, 0, 30, .6));
        background: linear-gradient(to top, #ffd89b, rgba(0, 0, 30, .6));
        /* Chrome 10-25, Safari 5.1-6 */
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
}
@keyframes fall {
    from {
        transform: translateY(-200px);
    }
    to {
        transform: translateY(400px);
    }
}
@media(max-width:767px) {
    .control-single {
        display: block;
        margin-bottom: 30px;
    }
}

HTML

<div class="rain-controls type-of-control">
        <div class="control-single">
            <input id="no-rain-radio" type="radio" name="rain-level" value="no-rain" checked></input>
            <label class="highlighted" id="label-no-rain" for="no-rain-radio">no rain</label>
        </div>
        <div class="control-single">
            <input id="light-rain-radio" type="radio" name="rain-level" value="light-rain"></input>
            <label id="label-light-rain" for="light-rain-radio">light rain</label>
        </div>
        <div class="control-single">
            <input id="heavy-rain-radio" type="radio" name="rain-level" value="heavy-rain"></input>
            <label id="label-heavy-rain" for="heavy-rain-radio">heavy rain</label>
        </div>
    </div>

<div class="dusk-container type-of-control">
        <div class="control-single">
            <input type="radio" id="light-night" name="light-level" value="night" checked>
            <label id="label-night" for="light-night" class="highlighted">night mode</label>
        </div>
        <div class="control-single">
            <input type="checkbox" id="light-dusk" name="light-level" value="dusk">
            <label id="label-dusk" for="light-dusk">dusk mode</label>
        </div>
    </div>

<div class="lightning-container type-of-control">
        <button class="lightning-button">lightning</button>
    </div>
</div>

<svg width="580" height="400" xmlns="https://www.w3.org/2000/svg">
        
        <g>
            <rect fill="rgba(0,0,0,.0)" id="canvas_background" height="402" width="582" y="-1" x="-1" />
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" />
            </g>
        </g>
        <g>

<svg id="rain-middle" width="580" height="400" xmlns="https://www.w3.org/2000/svg">

<g>

<g>

Rain Machine,可以调节雨量、背景环境模式（黄昏还是夜晚）以及触发闪电动画。

html5, rain, lighting

编辑器支持Emmet

快捷键

Rain Machine,可以调节雨量、背景环境模式（黄昏还是夜晚）以及触发闪电动画。

html5, rain, lighting

HTML5 Canvas梅雨季节动画（在雨中撑伞行走的路人）

美轮美奂的HTML5/Canvas散影（焦外成像）背景动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：