HTML5 Canvas 沙尘暴/火山灰/重度雾霾天气景观

Sandstorm Landscape，可用来建立海市蜃楼的动画场景。

canvas, storm

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var w = window.innerWidth,
    h = window.innerHeight,
    canvas = document.getElementById('sand'),
    ctx = canvas.getContext('2d'),
    rate = 50,
    arc = 500,
    time,
    count,
    size = 2,
    speed = 20,
    lights = new Array,
    colors = ['#33261a'];

canvas.setAttribute('width', w);
canvas.setAttribute('height', h);

function init() {
    time = 0;
    count = 0;

for (var i = 0; i < arc; i++) {
        lights[i] = {
            x: Math.ceil(Math.random() * w),
            y: Math.ceil(Math.random() * h),
            toX: Math.random() * 5 + 1,
            toY: Math.random() * 5 + 1,
            c: colors[Math.floor(Math.random() * colors.length)],
            size: Math.random() * size
        }
    }
}

function bubble() {
    ctx.clearRect(0, 0, w, h);

for (var i = 0; i < arc; i++) {
        var li = lights[i];

ctx.beginPath();
        ctx.arc(li.x, li.y, li.size, 0, Math.PI * 2, false);
        ctx.fillStyle = li.c;
        ctx.fill();

li.x = li.x + li.toX * (time * 0.05);
        li.y = li.y + li.toY * (time * 0.05);

if (li.x > w) {
            li.x = 0;
        }
        if (li.y > h) {
            li.y = 0;
        }
        if (li.x < 0) {
            li.x = w;
        }
        if (li.y < 0) {
            li.y = h;
        }
    }
    if (time < speed) {
        time++;
    }
    timerID = setTimeout(bubble, 1000 / rate);
}
init();
bubble();

编译

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:before,
:after {
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    background: #33261a;
    overflow: hidden;
}
.landscape {
    position: relative;
    height: 600px;
    background: #864;
    overflow: hidden;
}
.landscape * {
    position: absolute;
    bottom: 0;
}
.sun {
    left: 60%;
    bottom: 350px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #ff9;
    box-shadow: 0 0 150px #ff9;
}
.hills {
    left: 50%;
}
.hills div {
    overflow: hidden;
    border-radius: 2%;
    transform: rotate(45deg);
}
.hills div:nth-child(1),
.hills div:nth-child(2) {
    bottom: -450px;
    width: 700px;
    height: 700px;
    background: #77593c;
}
.hills div:nth-child(1) {
    left: -600px;
}
.hills div:nth-child(2) {
    left: 0;
}
.hills div:nth-child(3),
.hills div:nth-child(4),
.hills div:nth-child(5) {
    bottom: -350px;
    width: 500px;
    height: 500px;
    background: #664d33;
}
.hills div:nth-child(3) {
    left: -750px;
}
.hills div:nth-child(4) {
    left: -250px;
}
.hills div:nth-child(5) {
    left: 250px;
}
.hills div:nth-child(6),
.hills div:nth-child(7) {
    bottom: -400px;
    left: -600px;
    width: 500px;
    height: 500px;
    background: #55402b;
}
.hills div:nth-child(6) {
    left: -500px;
}
.hills div:nth-child(7) {
    left: 0;
}
.building {
    left: 50%;
    width: 250px;
    height: 520px;
    margin-left: -125px;
}
.tower {
    background: linear-gradient(to bottom, #55402b 0%, #3a2b1d 100%);
    box-shadow: inset 0 5px 0 #432, inset 0 -1px 0 #432, inset 0 -5px 0 #33261a, inset 1px 0 0 #432, inset -1px 0 0 #432;
    overflow: hidden;
}
.t1 {
    left: 110px;
    width: 30px;
    height: 520px;
}
.t2 {
    left: 80px;
    width: 60px;
    height: 380px;
}
.t3 {
    left: 120px;
    width: 60px;
    height: 230px;
}
.t4 {
    left: 60px;
    width: 60px;
    height: 140px;
}
.t5 {
    left: 250px;
    width: 55px;
    height: 150px;
}
.t6 {
    left: 175px;
    width: 80px;
    height: 30px;
}
.t7 {
    left: -50px;
    width: 125px;
    height: 55px;
}
.t8 {
    left: -160px;
    width: 80px;
    height: 200px;
}
.t9 {
    left: -300px;
    width: 100px;
    height: 30px;
}
.t10 {
    left: 350px;
    width: 120px;
    height: 50px;
}
.tower:before {
    top: 5px;
    left: 0;
    width: 1px;
    height: calc(100% - 11px);
    box-shadow: 0px 0px #6d5236, 5px 0 #6d5236, 10px 0 #6d5236, 15px 0 #6d5236, 20px 0 #6d5236, 25px 0 #6d5236, 30px 0 #6d5236, 35px 0 #6d5236, 40px 0 #6d5236, 45px 0 #6d5236, 50px 0 #6d5236, 55px 0 #6d5236, 60px 0 #6d5236, 65px 0 #6d5236, 70px 0 #6d5236, 75px 0 #6d5236, 80px 0 #6d5236, 85px 0 #6d5236, 90px 0 #6d5236, 95px 0 #6d5236, 100px 0 #6d5236, 105px 0 #6d5236, 110px 0 #6d5236, 115px 0 #6d5236, 120px 0 #6d5236, 125px 0 #6d5236;
}
.tower:after {
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 1px;
    box-shadow: 0px 0px #4b3825, 0 -10px #4b3825, 0 -20px #4b3825, 0 -30px #4b3825, 0 -40px #4b3825, 0 -50px #4b3825, 0 -60px #4b3825, 0 -70px #4b3825, 0 -80px #4b3825, 0 -90px #4b3825, 0 -100px #4b3825, 0 -110px #4b3825, 0 -120px #4b3825, 0 -130px #4b3825, 0 -140px #4b3825, 0 -150px #4b3825, 0 -160px #4b3825, 0 -170px #4b3825, 0 -180px #4b3825, 0 -190px #4b3825, 0 -200px #4b3825, 0 -210px #4b3825, 0 -220px #4b3825, 0 -230px #4b3825, 0 -240px #4b3825, 0 -250px #4b3825, 0 -260px #4b3825, 0 -270px #4b3825, 0 -280px #4b3825, 0 -290px #4b3825, 0 -300px #4b3825, 0 -310px #4b3825, 0 -320px #4b3825, 0 -330px #4b3825, 0 -340px #4b3825, 0 -350px #4b3825, 0 -360px #4b3825, 0 -370px #4b3825, 0 -380px #4b3825, 0 -390px #4b3825, 0 -400px #4b3825, 0 -410px #4b3825, 0 -420px #4b3825, 0 -430px #4b3825, 0 -440px #4b3825, 0 -450px #4b3825, 0 -460px #4b3825, 0 -470px #4b3825, 0 -480px #4b3825, 0 -490px #4b3825, 0 -500px #4b3825;
}
.d {
    left: 50%;
    z-index: 1;
    margin-left: -5px;
    width: 11px;
    height: 12px;
    border: 1px solid #33261a;
    border-bottom: 0;
    background: #432;
}
.d:before {
    left: 4px;
    width: 1px;
    height: 12px;
    background: #33261a;
}
.d:after {
    top: 4px;
    left: 2px;
    width: 5px;
    height: 3px;
    border-left: 1px solid #33261a;
    border-right: 1px solid #33261a;
}
.radio {
    width: 2px;
    background: #432;
}
.r1 {
    left: 124px;
    height: 70px;
    bottom: 520px;
}
.r2 {
    left: 95px;
    height: 40px;
    bottom: 380px;
}
.radio:after {
    left: -4px;
    bottom: 0;
    width: 10px;
    height: 4px;
    background: #432;
    /* Codepen Preview Mode */
}
@media only screen and (height: 300px) {
    .landscape {
        margin-top: -320px;
    }
    .sun {
        bottom: 180px;
    }
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

HTML

Sandstorm Landscape，可用来建立海市蜃楼的动画场景。

canvas, storm

编辑器支持Emmet

快捷键

Sandstorm Landscape，可用来建立海市蜃楼的动画场景。

canvas, storm

HTML5 Canvas火山口动画模拟

HTML5/Canvas 火焰和燃烧的骷髅头

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：