刚出炉的svg点赞创意效果献给爱豆

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

介绍

最近沉迷自己的爱豆太过可爱，于是想到了一个给爱豆的点赞效果，实现了出来。本期我们将会讲解一个用svg+css实现的点赞效果，不卖关子，先来康康效果吧：

正文

1.基本结构

<div id="app">
    <div class="my-heart">
        <input type="checkbox" />
        <svg viewbox="0 0 1024 1024"></svg>
    </div>
</div>
复制代码

:root{
    --bg-color:#E3DFD2;
}

#app{
    width: 100%;
    height: 100vh;
    background-color:var(--bg-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.my-heart{
    width:80vmin; 
    height:auto;
    input[type=checkbox]{
        width: 20%;
        height: 20%;
        cursor: pointer;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
}
复制代码

我们先不做小心心，先来说说怎么触发点赞的吧，这里期望用checkbox选中即为点赞触发动画所以我要把他用绝对定位居中在div.my-heart中央。让其层级大于下面的svg。

input[type=checkbox]{
	opacity: 0;
}
复制代码

确保放入中央后，我们让他再隐藏掉，后面就要绘制小心心了。

2.心形绘制

与其说绘制不如说从iconfont找一个实底的心形，去拷贝一下svg代码。

<svg viewbox="0 0 1024 1024">
    <defs>
        <mask id="mask" x="0" y="0">
            <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
            <path class="heart"
                  d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z">
            </path>
        </mask>
    </defs>
    <rect class="box" x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill-opacity="1"  />
</svg>
复制代码

我们先写一个defs引用层，在里面写mask标签，其下再写入一个填充满区域的矩形，最后把刚拷贝的代码只要其path里的路径，写入进去。这样在外面的rect去引用mask神奇的事就发生了，我们抠出来一颗心形。

当然这样看，显得有些大，而且期望的是初始状态为红心，点赞后才出动画照骗。

svg{
    background:rgb(235, 32, 32);
    width: 100%;
    height: 100%;
    display:block;
    .box{
        fill:var(--bg-color);
    }
    .heart{
        transform-origin: 50% 50%;
        transform: scale(.2);  
    }
}
复制代码

很简单我们把svg的背景色改为红色，又因为这颗心是扣出来的，所以就会显示红色，而且我们还要用动画属性scale缩小一下。这样红心就完成了。

3.显示爱豆

看到这里很多小伙伴应该已经猜出来了，展示爱豆的图片其实就是把红色背景换成图片，然后用动画放大罢了。但别忘了我们一开始的checkbox，我们利用他的:checked ，当选中后就去联系他后面的svg，才能使其改变背景和其大小。

input[type=checkbox]{
    &:checked + svg{
        background:url('./assets/face.jpeg');
        background-size:cover;
        .heart{
            transition: 2.5s transform;
            transform: scale(3);
        }
    }
}
复制代码

瞧就是这么几句话，我们的狗哥就闪亮登场了~

结语

本次通过这个案例，你可以学到svg的mask可以抠出任意形状，也可以学到checkbox&:checked做联合控制动画。哝，在线演示。看完是不是发现又简单又实用，赶紧燥起来，发出来，一起康康每个人不同的爱豆！！