This is the 24th day of my participation in the Novembermore Challenge.The final text challenge in 2021

introduce

Recently addicted to their love beans too cute, so I thought of a love beans praise effect, to achieve it. In this video we will explain a SVG + CSS like effect. Let’s start with the Kangkang effect:

The body of the

1. Basic structure

<div id="app">
    <div class="my-heart">
        <input type="checkbox" />
        <svg viewbox="0 0 1024 1024"></svg>
    </div>
</div>
Copy the code
: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%); }}Copy the code

So I’m going to center him in the absolute position of div.my-heart. Make it bigger than the SVG below.

input[type=checkbox]{
	opacity: 0;
}
Copy the code

After making sure it’s in the center, we’ll let it hide again, and then we’ll draw the heart of caution.

2. Heart drawing

Instead of drawing, find a solid-base heart from iconfont and copy the SVG code.

<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.6 c - 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 39-13.5 139.2 6.1 19.5 12.8 28.5 20.1-9 10-14-28.5-7.3-18.5-20.1-41.8-25.5-89.9-39 39-35.5 0-69.9-139.2-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.3 L23.7 15.2 C10.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.9 - z">
            </path>
        </mask>
    </defs>
    <rect class="box" x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill-opacity="1"  />
</svg>
Copy the code

We’ll start with a defS reference layer, write the mask tag inside, then write a rectangle to fill the area below, and finally write in the code we just copied as long as the path in its path. So in the rect on the outside to quote the mask magical thing happened, we cut out a heart shape.

Of course, it looks a little big, and the expectation is that the initial state is red, after the “like”, the animation is tricked.

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); }}Copy the code

It is easy to change the SVG background color to red, and since the heart is buckled, it will appear red, and we will use the animation property scale to reduce it. So the hearts are done.

3. Show love beans

As many of you may have guessed by now, showing the image of aidou is actually replacing the red background with an image and zooming in with animation. But don’t forget our initial checkbox, we use its :checked, and then contact the SVG behind it to make it change its background and size.

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

Look is so a few words, our dog brother shine on the stage ~

conclusion

In this case, you can learn how SVG masks can be pulled out of arbitrary shapes, and how checkbox&: Checked can do joint control animations. Nong, online demo. After looking is not found simple and practical, hurriedly dry up, issued, together kangkang everyone different love beans!!