恋爱中的机器人动画作品

用爱心填满两个机器人之间的空间，会有一个爱心放大动画，满满的爱。

svg, robot

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function drawHeart(options) {
    var length = 10;
    ctx.save();
    ctx.translate(options.x, options.y);
    ctx.beginPath();
    ctx.globalAlpha = options.opacity;
    ctx.rotate(Math.PI / 220 * options.angle);
    ctx.scale(options.scale, options.scale);
    ctx.fillStyle = options.color;
    ctx.lineWidth = options.width;
    //actual heart shape drawing
    ctx.bezierCurveTo(32.4, 0.0, 28.9, 8.6, 28.9, 8.6);
    ctx.bezierCurveTo(28.9, 8.6, 25.6, 0.0, 15.7, 0.0);
    ctx.bezierCurveTo(15.7, 0.0, 0.0, 0.4, 0.0, 15.8);
    ctx.bezierCurveTo(0.0, 15.8, 0.0, 28.3, 12.5, 36.8);
    ctx.bezierCurveTo(12.5, 36.8, 26.4, 47.6, 28.9, 54.3);
    ctx.bezierCurveTo(31.5, 47.6, 45.5, 36.8, 45.5, 36.8);
    ctx.bezierCurveTo(57.9, 28.3, 58.0, 15.8, 58.0, 15.8);
    ctx.bezierCurveTo(58.0, 0.4, 42.2, 0.0, 42.2, 0.0);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var el = document.getElementById('c'),
    ctx = el.getContext('2d'),
    isDrawing, longTID, points = [],
    radius = 15,
    bigH = document.getElementById("bigheart");

function addRandomPoint(e) {
    points.push({
        x: e.layerX,
        y: e.layerY,
        angle: getRandomInt(0, 360),
        width: getRandomInt(1, 3),
        opacity: Math.random(),
        scale: getRandomInt(1, 6) / 10,
        color: ('rgb(' + getRandomInt(200, 250) + ',' + getRandomInt(10, 80) + ',' + getRandomInt(20, 110) + ')')
    });
}

el.onmousedown = function(e) {
    isDrawing = true;
    addRandomPoint(e);
    //big heart setTimeout
    clearTimeout(longTID);
    longTID = setTimeout(longPress, 1000);
};

//longpress for the big heart
function longPress() {
    bigH.style.opacity = "0.8";
    bigH.style.transform = "scale(0.95)";
}

el.onmousemove = function(e) {
    if (!isDrawing) return;

addRandomPoint(e);

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    for (var i = 0; i < points.length; i++) {
        drawHeart(points[i]);
    }
};

el.onmouseup = function() {
    isDrawing = false;
    points.length = 0;
    //clear the canvas
    ctx.clearRect(0, 0, el.width, el.height);
    //get rid of the big heart
    clearTimeout(longTID);
    bigH.style.opacity = "0";
    bigH.style.transform = "scale(0)";
};

编译

CSS

body {
    background: black;
    font-family: 'Pacifico', cursive;
}
h1 {
    position: absolute;
    text-align: center;
    width: 100%;
    color: #422034;
    margin-top: 50px;
    text-shadow: 0 0 8px #f9e5a9;
    -webkit-touch-callout: none;
    /* iOS Safari */
    
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    
    -moz-user-select: none;
    /* Firefox */
    
    -ms-user-select: none;
    /* IE/Edge */
    
    user-select: none;
}
canvas {
    stroke: 1px solid #000;
    position: absolute;
    z-index: 2000;
    cursor: crosshair;
}
#bigheart {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    margin-top: 100px;
    opacity: 0;
    -webkit-transition: 0.5s all ease-out;
    transition: 0.5s all ease-out;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
#robotted {
    width: 70%;
    margin-left: 15%;
}
.cls-1 {
    fill: url(#linear-gradient);
}
.cls-2 {
    fill: url(#linear-gradient-2);
}
.cls-3 {
    fill: url(#linear-gradient-3);
}
.cls-4 {
    opacity: 0.1;
}
.cls-5 {
    fill: #563f2f;
}
.cls-38,
.cls-5,
.cls-54 {
    opacity: 0.5;
}
.cls-6 {
    fill: #4c3e32;
    opacity: 0.3;
}
.cls-7 {
    fill: url(#linear-gradient-4);
}
.cls-8 {
    fill: url(#linear-gradient-5);
}
.cls-9 {
    opacity: 0.6;
}
.cls-10 {
    fill: url(#linear-gradient-6);
}
.cls-11,
.cls-55 {
    opacity: 0.54;
}
.cls-12 {
    fill: url(#linear-gradient-7);
}
.cls-13 {
    opacity: 0.61;
}
.cls-14 {
    fill: url(#linear-gradient-8);
}
.cls-15 {
    fill: url(#linear-gradient-9);
}
.cls-16 {
    fill: url(#linear-gradient-10);
}
.cls-17 {
    fill: url(#linear-gradient-11);
}
.cls-18,
.cls-53 {
    opacity: 0.53;
}
.cls-19 {
    fill: url(#linear-gradient-12);
}
.cls-20 {
    fill: url(#linear-gradient-13);
}
.cls-21 {
    fill: url(#linear-gradient-14);
}
.cls-22 {
    opacity: 0.34;
}
.cls-23 {
    fill: url(#linear-gradient-15);
}
.cls-24 {
    opacity: 0.36;
}
.cls-25,
.cls-39,
.cls-55 {
    fill: #44322c;
}
.cls-25 {
    opacity: 0.98;
}
.cls-26 {
    fill: #eac081;
}
.cls-27 {
    opacity: 0.42;
}
.cls-28 {
    fill: #d3a56a;
}
.cls-29 {
    fill: #c18a40;
}
.cls-30 {
    fill: #f4bb8c;
}
.cls-31,
.cls-53 {
    fill: #ba8a4a;
}
.cls-32 {
    opacity: 0.47;
}
.cls-33 {
    fill: #f9dba4;
}
.cls-34 {
    opacity: 0.66;
}
.cls-35 {
    fill: #4c3732;
}
.cls-36 {
    fill: #231815;
}
.cls-37 {
    opacity: 0.59;
}
.cls-38 {
    fill: #233535;
}
.cls-40 {
    fill: #617f7f;
}
.cls-41,
.cls-57,
.cls-63 {
    fill: #422034;
}
.cls-41 {
    opacity: 0.2;
}
.cls-42,
.cls-50 {
    fill: #26514e;
}
.cls-43,
.cls-48,
.cls-49,
.cls-58,
.cls-62 {
    fill: none;
    stroke-miterlimit: 10;
}
.cls-43,
.cls-48,
.cls-49 {
    stroke: #26514e;
}
.cls-43 {
    opacity: 0.83;
}
.cls-44 {
    fill: #fff;
}
.cls-45,
.cls-47 {
    fill: #61918e;
}
.cls-45,
.cls-46 {
    opacity: 0.45;
}
.cls-46 {
    fill: #b8c9c7;
}
.cls-49,
.cls-62 {
    stroke-width: 2px;
}
.cls-50 {
    opacity: 0.49;
}
.cls-51 {
    fill: #193835;
}
.cls-52 {
    fill: #ebc17d;
    opacity: 0.56;
}
.cls-54 {
    fill: #3a2c36;
}
.cls-56 {
    fill: #684a5c;
}
.cls-58,
.cls-62 {
    stroke: #190a12;
}
.cls-59 {
    fill: #54404c;
}
.cls-60 {
    fill: #aa9ba5;
    opacity: 0.33;
}
.cls-61 {
    fill: #49333f;
}
.cls-63 {
    opacity: 0.43;
}
#teal {
    -webkit-animation: hover 2s ease-in-out infinite both;
    animation: hover 2s ease-in-out infinite both;
}
#teal-shadow {
    -webkit-animation: shadowhover 2s ease-in-out infinite both;
    animation: shadowhover 2s ease-in-out infinite both;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
#purple {
    -webkit-animation: hover 2s -0.5s ease-in-out infinite both;
    animation: hover 2s -0.5s ease-in-out infinite both;
}
#purple-shadow {
    -webkit-animation: shadowhover 2s -0.5s ease-in-out infinite both;
    animation: shadowhover 2s -0.5s ease-in-out infinite both;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
@-webkit-keyframes hover {
    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}
@keyframes hover {
    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}
@-webkit-keyframes shadowhover {
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.4;
    }
}
@keyframes shadowhover {
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.4;
    }
}

HTML

<h1>Draw the space between the robotters</h1>

用爱心填满两个机器人之间的空间，会有一个爱心放大动画，满满的爱。

svg, robot

编辑器支持Emmet

快捷键

用爱心填满两个机器人之间的空间，会有一个爱心放大动画，满满的爱。

svg, robot

WebGL Three.js 3D机器人行走动作分解动画

纯CSS制作的EVE机器人动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：