使用SVG和CSS3制作的爱心点赞动画

点击爱心时，有一个填充和摇晃的动画效果。

svg, css3, heart, love

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.wishlist-heart-group {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: relative;
}
.wishlist-heart-group input[type="checkbox"] {
    position: absolute;
    left: -999999px;
    top: -999999px;
}
.wishlist-heart-group input[type="checkbox"] + label svg {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.wishlist-heart-group input[type="checkbox"]:checked + label svg {
    -webkit-animation: wishlist-heart-wiggle 400ms 50ms forwards ease-in-out;
    animation: wishlist-heart-wiggle 400ms 50ms forwards ease-in-out;
}
.wishlist-heart-group input[type="checkbox"]:checked + label svg #heart-path {
    -webkit-animation: wishlist-heart-add 300ms forwards;
    animation: wishlist-heart-add 300ms forwards;
}
.wishlist-heart-group input[type="checkbox"] + label svg #heart-path {
    -webkit-transition: fill 200ms;
    transition: fill 200ms;
}
.wishlist-heart-group label {
    display: inline-block;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}
@-webkit-keyframes wishlist-heart-wiggle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    75% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes wishlist-heart-wiggle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    75% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes wishlist-heart-add {
    0% {
        stroke-width: 5;
    }
    50% {
        stroke-width: 20;
    }
    100% {
        stroke-width: 5;
        fill: #f8332a;
    }
}
@keyframes wishlist-heart-add {
    0% {
        stroke-width: 5;
    }
    50% {
        stroke-width: 20;
    }
    100% {
        stroke-width: 5;
        fill: #f8332a;
    }
}
body {
    height: 100vh;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

HTML

点击爱心时，有一个填充和摇晃的动画效果。

svg, css3, heart, love

编辑器支持Emmet

快捷键

点击爱心时，有一个填充和摇晃的动画效果。

svg, css3, heart, love

使用SVG和CSS3制作节日庆祝的五彩纸屑动画

使用SVG和CSS3制作的纸飞机飘摇页面背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：