动感十足的Like（点赞）按钮

点击后，立刻给你一个红心！使用Canvas绘制。

canvas, button, heart

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var panel = document.getElementById('panel');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
panel.appendChild(canvas);
canvas.width = 320;
canvas.height = 80;

var Point = function(x_origin, y_origin, x_init, y_init, delay, x, y) {
    this.x_origin = x_origin;
    this.y_origin = y_origin;
    this.x = x | x_origin;
    this.y = y | y_origin;
    this.x_init = x_init;
    this.y_init = y_init;
    this.radius = 5;

this.angle_init;
    this.angle;
    this.angle_origin;
    this.d = Math.sqrt(this.x_origin * this.x_origin + this.y_origin * this.y_origin);
    if (this.x_origin < 0) {
        this.angle_origin = (Math.atan(this.y_origin / this.x_origin) * (-1) + Math.PI);
    } else if (this.x_origin > 0) {
        this.angle_origin = (Math.atan(this.y_origin / this.x_origin) * (-1));
    } else {
        this.angle_origin = Math.PI / 2;
    }
    this.delay = delay | 10;
}

var heartAlpha = 0;
// suprising heart
var SH_left = 0,
    SH_top = 0;
var s_start = new Point(0, 0);
var sp1 = new Point(-100, -100, 100, -100, 1);
var sp2 = new Point(-200, -80, 120, -110, 10);
var sf1 = new Point(-200, -180, 170, -120, 10);
var sp3 = new Point(-200, -280, 240, -130, 10);
var sp4 = new Point(0, -300, 200, -50, 15);
var sf2 = new Point(0, -200, 300, -100, 30);
var sp5 = new Point(100, -300, 270, -100, 30);
var sp6 = new Point(200, -300, 360, -10, 20);
var sf3 = new Point(200, -200, 280, -10, 40);
var sp7 = new Point(200, -100, 230, -10, 50);
var sp8 = new Point(100, -100, 120, -20, 60);
var spoints = [s_start, sp1, sp2, sf1, sp3, sp4, sf2, sp5, sp6, sf3, sp7, sp8];
var suprisingDuration = 170;
var suprisingCount = suprisingDuration;
var speedCurve = [0, 0.08, 0.1525, 0.2175, 0.275, 0.33, 0.38, 0.425, 0.4675, 0.5075, 0.5425, 0.575, 0.6075, 0.635, 0.6625, 0.6875, 0.7125, 0.735, 0.755, 0.775, 0.7925, 0.81, 0.825, 0.84, 0.855, 0.8675, 0.88, 0.8925, 0.9025, 0.9125, 0.9225, 0.9325, 0.9425, 0.95, 0.9575, 0.965, 0.97, 0.9775, 0.9825, 0.99, 0.995, 1, 1.0025, 1.0075, 1.0125, 1.015, 1.0175, 1.0225, 1.025, 1.0275, 1.03, 1.0325, 1.0325, 1.035, 1.0375, 1.0375, 1.04, 1.04, 1.0425, 1.0425, 1.0425, 1.0425, 1.045, 1.045, 1.045, 1.045, 1.045, 1.045, 1.045, 1.0425, 1.0425, 1.0425, 1.0425, 1.04, 1.04, 1.04, 1.0375, 1.0375, 1.0375, 1.035, 1.035, 1.0325, 1.0325, 1.03, 1.0275, 1.0275, 1.025, 1.025, 1.0225, 1.02, 1.02, 1.0175, 1.015, 1.0125, 1.0125, 1.01, 1.0075, 1.005, 1.005, 1.0025, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var SH_btnPlayOpacity = 1.0;

// pulsing heart
var PH_left = 0,
    PH_top = 300;
var ps_start = new Point(0, 0);
var ps1 = new Point(0, -100);
var ps2 = new Point(-200, -80);
var psf1 = new Point(-200, 20);
var ps3 = new Point(-200, 120);
var ps4 = new Point(-100, 100);
var psf2 = new Point(0, 200);
var ps5 = new Point(100, 100);
var ps6 = new Point(200, 100);
var psf3 = new Point(200, 0);
var ps7 = new Point(200, -100);
var ps8 = new Point(100, -100);
var pspoints = [ps1, ps2, ps3, ps4, ps5, ps6, ps7, ps8, psf1, psf2, psf3];
var pulsingLargeDuration = 20,
    pulsingBackDuration = 40;
var pulsingDuration = pulsingLargeDuration + pulsingBackDuration;
var pulsingCount = 0;
var ps_scaleX_norm = 0.5,
    ps_scaleY_norm = 0.5,
    ps_scaleX, ps_scaleY, ps_scaleX_dest = 0.7,
    ps_scaleY_dest = 0.56;
var pulsingCurve = [00, 0.1925, 0.2675, 0.3225, 0.365, 0.4025, 0.4375, 0.4675, 0.4925, 0.5175, 0.54, 0.5625, 0.5825, 0.6, 0.6175, 0.635, 0.65, 0.665, 0.68, 0.6925, 0.705, 0.7175, 0.73, 0.74, 0.75, 0.7625, 0.77, 0.78, 0.79, 0.7975, 0.8075, 0.815, 0.8225, 0.83, 0.8375, 0.845, 0.8525, 0.8575, 0.865, 0.87, 0.875, 0.8825, 0.8875, 0.8925, 0.8975, 0.9025, 0.9075, 0.9125, 0.915, 0.92, 0.925, 0.9275, 0.9325, 0.935, 0.9375, 0.9425, 0.945, 0.9475, 0.95, 0.955, 0.9575, 0.96, 0.9625, 0.965, 0.9675, 0.9675, 0.97, 0.9725, 0.975, 0.9775, 0.9775, 0.98, 0.98, 0.9825, 0.985, 0.985, 0.9875, 0.9875, 0.9875, 0.99, 0.99, 0.99, 0.9925, 0.9925, 0.9925, 0.9925, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.9975, 0.9975, 0.9975, 0.9975, 0.9975, 0.9975, 0.9975, 1, 1]

var Timecount = 0;

// init
function init() {
    // suprising heart - init angles
    for (var i = 1; i < spoints.length; ++i) {
        spoints[i].angle_init = Math.atan(spoints[i].y_init * (-.2) / spoints[i].x_init);
        spoints[i].angle = spoints[i].angle_init;
    }
}
init();

// start recycle
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
requestAnimationFrame(run);

// run the drawing programe
function run() {
    // update
    update();
    // draw
    drawBG();
    drawSuprisingHeart();
    // drawPulsingHeart();
    //
    requestAnimationFrame(run);
}

function update() {
    ++Timecount;

// suprising
    if (suprisingCount < suprisingDuration) {
        suprisingCount += 2;
        heartAlpha = suprisingCount / suprisingDuration;
        updateSuprisingHeart();
    }
    // pulsing 
    if (pulsingCount < pulsingLargeDuration) {
        ++pulsingCount;
        ps_scaleX = (pulsingCurve[pulsingCount * (100 / pulsingLargeDuration)] * 0.25 + 0.5);
        ps_scaleY = (pulsingCurve[pulsingCount * (100 / pulsingLargeDuration)] * 0.10 + 0.5);
        // console.log(ps_scaleX)
    } else if (pulsingCount >= pulsingLargeDuration && pulsingCount < pulsingDuration) {
        ++pulsingCount;
        ps_scaleX = (0.75 - 0.25 * (pulsingCount - pulsingLargeDuration) / pulsingBackDuration);
        ps_scaleY = (0.60 - 0.10 * (pulsingCount - pulsingLargeDuration) / pulsingBackDuration);
        if (pulsingCount == pulsingDuration) {
            pulsingCount = 0;
        }
    }
}

function updateSuprisingHeart() {
    for (var i = 1; i < spoints.length; ++i) {
        if (suprisingCount > spoints[i].delay)
            spoints[i].angle = spoints[i].angle_init + (spoints[i].angle_origin - spoints[i].angle_init) * speedCurve[suprisingCount - spoints[i].delay];
    }
}

function drawBG() {
    // 
    ctx.save();
    ctx.fillStyle = "#ccc";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
}

function drawSuprisingHeart() {
    //
    ctx.save();
    ctx.globalAlpha = heartAlpha;
    ctx.translate(canvas.width / 2, canvas.height / 2 + 20);
    ctx.scale(0.15, 0.15);
    // heart 
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.bezierCurveTo(sp1.d * Math.cos(sp1.angle), sp1.d * Math.sin(sp1.angle) * (-1), sp2.d * Math.cos(sp2.angle), sp2.d * Math.sin(sp2.angle) * (-1), sf1.d * Math.cos(sf1.angle), sf1.d * Math.sin(sf1.angle) * (-1));
    ctx.bezierCurveTo(sp3.d * Math.cos(sp3.angle), sp3.d * Math.sin(sp3.angle) * (-1), sp4.d * Math.cos(sp4.angle), sp4.d * Math.sin(sp4.angle) * (-1), sf2.d * Math.cos(sf2.angle), sf2.d * Math.sin(sf2.angle) * (-1));
    ctx.bezierCurveTo(sp5.d * Math.cos(sp5.angle), sp5.d * Math.sin(sp5.angle) * (-1), sp6.d * Math.cos(sp6.angle), sp6.d * Math.sin(sp6.angle) * (-1), sf3.d * Math.cos(sf3.angle), sf3.d * Math.sin(sf3.angle) * (-1));
    ctx.bezierCurveTo(sp7.d * Math.cos(sp7.angle), sp7.d * Math.sin(sp7.angle) * (-1), sp8.d * Math.cos(sp8.angle), sp8.d * Math.sin(sp8.angle) * (-1), 0, 0);
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 15.0;
    ctx.fillStyle = "#fb3f55";
    ctx.fill();
    ctx.restore();

//
    ctx.restore();
}

function drawPulsingHeart() {
    // context save
    ctx.save();
    ctx.translate(PH_left + canvas.width / 2, PH_top + 120);
    ctx.scale(ps_scaleX - 0.1, ps_scaleY - 0.1);
    // heart 
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.bezierCurveTo(ps1.x, ps1.y, ps2.x, ps2.y, psf1.x, psf1.y);
    ctx.bezierCurveTo(ps3.x, ps3.y, ps4.x, ps4.y, psf2.x, psf2.y);
    ctx.bezierCurveTo(ps5.x, ps5.y, ps6.x, ps6.y, psf3.x, psf3.y);
    ctx.bezierCurveTo(ps7.x, ps7.y, ps8.x, ps8.y, 0, 0);
    ctx.fillStyle = "#df2354";
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowColor = "#fff";
    ctx.shadowBlur = 55.0;
    ctx.fill();
    ctx.restore();
    // restore
    ctx.restore();
}

// SUPRISING
// button play
// buttonLike.addEventListener('click',handler,false);
var handler_like = function(event) {
    var target = event.target;
    switch (event.type) {
        case "click":
            for (var i = 0; i < spoints.length; ++i) {
                spoints[i].angle = spoints[i].angle_init;
            }
            suprisingCount = 1;
            text_like.style.left = '3rem';
            text_like.style.opacity = 0;
            buttonLike.style.webkitTransform = 'scale(1.05)';
            buttonLike.style.boxShadow = '0px 4px 20px rgba(3,3,3,0.5)';
            break;
        case "mouseover":
            // console.log('a');
            break;
    }
}
buttonLike.onclick = handler_like;
buttonLike.onmouseover = handler_like;
buttonLike.addEventListener('webkitTransitionEnd', btnShrinkBack, false);

function btnShrinkBack() {
    buttonLike.style.webkitTransform = 'scale(1)';
    buttonLike.style.boxShadow = '0px 2px 2px #05953e';
}

编译

CSS

body {
    margin: 0px;
    padding: 0px;
    background-color: #0acc8e;
    font-family: 'frutiger', 'arial', sans-serif;
}
#buttonLike {
    position: relative;
    margin: 10rem auto 0;
    width: 20rem;
    height: 5rem;
    background: #f8f8f8;
    border-radius: 3rem;
    border-top: 2px solid #fff;
    box-shadow: 0px 2px 2px #05953e;
    cursor: pointer;
    overflow: hidden;
}
#buttonLike:hover {} #panel {
    position: absolute;
}
#text_like {
    position: absolute;
    top: 1rem;
    left: 8rem;
    font-size: 2rem;
    color: #456;
}
.info {
    margin-top: 1rem;
    color: #05953e;
    text-align: center;
}
.transition {
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(0.69, 0.20, 0.27, 0.83);
    -webkit-transition-duration: .3s;
    -webkit-transition-timing-function: cubic-bezier(0.12, 0.61, 0.55, 0.86);
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: cubic-bezier(0.69, 0.20, 0.27, 0.83);
}
.transition-ease-out {
    -webkit-transition: all 0.4s ease-out;
}
.transform {
    -webkit-transform: scale(1);
}

HTML

点击后，立刻给你一个红心！使用Canvas绘制。

canvas, button, heart

编辑器支持Emmet

快捷键

点击后，立刻给你一个红心！使用Canvas绘制。

canvas, button, heart

一款很棒的材料化设计中的行动按钮（Action Button）界面动效设计

纯CSS实现3D版本的双选标签文本（Yes | No）开关按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：