这是我参与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做联合控制动画。哝,在线演示。看完是不是发现又简单又实用,赶紧燥起来,发出来,一起康康每个人不同的爱豆!!