满天星斗下土坡上电动自行车

很有自由兜风味道的全屏动画。

canvas, bike

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function curve(x) {
    y = (h / 1.667) - (200 * Math.sin((x * Math.PI) / 1200) * Math.cos((x * Math.PI) / 4800) * Math.cos((x * Math.PI) / 900) + (Math.PI / 3));
    return y;
}

function tanAt(x) {
        var slope = -0.1309 * Math.sin(0.000654498 * x) * Math.sin(0.00261799 * x) * Math.sin(0.523599 - 0.00349066 * x) + 0.523599 * Math.cos(0.000654498 * x) * Math.cos(0.00261799 * x) * Math.sin(0.523599 - 0.00349066 * x) - 0.698132 * Math.sin(0.00261799 * x) * Math.cos(0.000654498 * x) * Math.cos(0.523599 - 0.00349066 * x);
        return Math.atan(slope);
    }
    //Update Array Values
count = 2 * w;

//Paint it out
function draw() {
        t++;
        ctx.clearRect(0, 0, w, 700);
        //Here goes the background
        for (var i = 0; i < arr.length; i++) {
            n = arr[i];
            ctx.beginPath();
            ctx.arc(n.x, n.y, n.r, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fillStyle = n.c;
            ctx.fill();
        };
        for (var i = 0; i < track.length; i++) {
            n = track[i];
            ctx.clearRect(n.x, n.y, 1, 700 - n.y);
            ctx.fillStyle = '#151E32';
            ctx.fillRect(n.x, n.y, 1, h - n.y);
            ctx.fillStyle = 'rgba(10,127,235,0.5)';
            ctx.fillRect(n.x, n.y, 1, 1);
        };
        vehicle.draw();
        update();
    }
    //Animation Loop
function init() {
    window.requestAnimationFrame(init);
    draw();
}
init();

编译

CSS

body {
    margin: 0px;
    text-align: center;
    background: black;
    overflow: hidden;
    background-color: #060a11;
    background: linear-gradient(155deg, #060a11 0%, #293c64 40%);
    background: -moz-linear-gradient(155deg, #060a11 0%, #293c64 40%);
    background-size: cover;
}
#cartesian {
    margin: 0px;
    border: 1px solid #020202;
    border-width: 1px 0px;
    position: absolute;
    z-index: +1;
    left: 0;
    top: 0;
}
#underlay {
    background: linear-gradient(to bottom left, rgba(255, 194, 0, 0.3) 0%, transparent 60%);
    background: -moz-osx-linear-gradient(to bottom left, rgba(255, 194, 0, 0.3) 0%, transparent 60%);
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
}
#title {
    width: 100%;
    margin-left: 0px;
    padding: 35px 0px;
    box-shadow: none;
    position: absolute;
    font-family: 'Proxima Nova';
    text-align: center;
    margin-top: -100px;
    top: 50%;
    z-index: +3;
}
#title>span:first-child {
    font-size: 50px;
    width: 100%;
    position: relative;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    letter-spacing: -0.1em;
    display: block;
    margin-left: -0.1em;
}
#title>span:nth-child(2) {
    font-size: 20px;
    width: 100%;
    display: block;
    position: relative;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 100;
}
#title>span:nth-child(2)>h5 {
    font-size: 15px;
    font-weight: 500;
}
#title>span:nth-child(2)>h4 {
    letter-spacing: 1em;
    font-weight: 100;
    font-size: 15px;
    margin-left: 1em;
    position: relative;
    font-family: 'Proxima Nova';
}

HTML

很有自由兜风味道的全屏动画。

canvas, bike

编辑器支持Emmet

快捷键

很有自由兜风味道的全屏动画。

canvas, bike

很棒的在线定制自行车页面模板和交互动画

HTML5 Bodymovin.js + Anime.js实现很有趣的骑自行车动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：