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

introduce

This issue we will use CSS3 and SVG combined to make a simple and practical like effect animation, why say simple, we will not rely on any JS logic code, why say practical, if we want to use only through the checkbox tag can determine whether he liked. So let’s first come to kangkang effect:

I don’t know if you have any ideas after seeing the effect. This case will be decomposed from the basic structure, basic style, hearts animation and diffusion circle animation

The body of the

1. Infrastructure

<div class="app">
    <div class="heart-icon">
        <input type="checkbox" />
        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path class="heart"
                  d="M512 854.9 7.7 0-14.3 - c - 2.7-19.6-8.1 L213.8 578.1 c - 3-2.3-7-6.3-12.3-11.6-5.2-5.4-13.4-15.1-24.8-29.2-11.3-14.2-21.4-28.6-30.3-43.6-8.9-14.8-16.9-32.9-23.8-54-7-21. 1 -10.5-41.7-10.5-61.6 0-65.4 18.9-116.7 56.7-153.6 S90-55.4 156.7-55.4 C18.5 0 37.3 3.2 56.4 9.6 19.2 6.4 37.1 15 53.6 25.9 16.5 10.9 30.7 21 42.6 30.6 11.9 9.5 23.2 19.6 33.9 30.3 10.7-10.7 22.1-20.8 33.9-30.3 11.9-9.5 26.1-19.7 42.6-30.6 16.5-10.9 34.4-19.5 53.6-25.9 19.2-6.4 38-9.6 56.4-9.6 66.7 0 118.9 18.5 156.7 55.4 37.8 36.9 56.7 88.1 56.7 153.6 0 65.8-34.1 132.8-102.3 200.9 L-278 267.8-c-5.3 5.4-11.9 8.1-19.6 8.1z">
            </path>
        </svg>
        <div class="heart-circle"></div>
    </div>
</div>
Copy the code

This is the entire HTML structure, where div.app as the main container will draw an elastic box that fills the screen with elements centered as the main interface.

We can see that div.heart-icon is the main container for the likes, which contains the checkbox to determine whether the likes are right. SVG is the main body of the heart, which can be downloaded from iconfont. And at the bottom is div.heart-circle, which will serve as the container for the eight little circles.

2. Basic styles

.app{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(
    109.5 deg,
    rgb(245.248.198) 11.2%,
    rgb(255.227.198) 100.2%
  );
}
.heart-icon {
    width: var(--size);
    position: relative;

    --skin-color: rgb(245.98.110);    / / red
    --gray-color: rgb(197.197.197);   / / gray
    --size: 160px;                      / / size
    --path-dasharray: 3600;             // Line length

    input[type="checkbox"] {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        opacity: 0;
    }
    svg{
        width: 100%;
        position: relative;
        z-index: 9;
        .heart {
            fill: var(--gray-color);
            stroke: var(--skin-color);
            stroke-dasharray: var(--path-dasharray);
            stroke-width: 50px; stroke-dashoffset: var(--path-dasharray); stroke-linecap: round; }}.heart-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 1px;
        height: 1px;
        border-radius: 50%;
        background-color: transparent; }}Copy the code

Here we set up four variables to unify the color and underline. Here we also found that the checkbox has been absolutely positioned on the top and hidden, so that after each click, the heart and circle below the animation. The next step is very simple, fill the color line with the length of the line and pay the SVG heart. Then eight small round containers, heart-circles, were made into 1px boxes with absolute positioning in the middle of the heart.

3. Hearts animation

For those of you who have written SVG animations, you already know how to write an animation. That is, control stroke-Dashoffset to draw edges, and then fill them with colors when they are finished.

@keyframes run {
    0% {
        stroke-dashoffset: var(--path-dasharray);
    }

    80% {
        stroke-dashoffset: 0;
        fill: var(--gray-color);
    }
    100% {
        stroke-dashoffset: 0; fill: var(--skin-color); }}Copy the code

Of course, when we click there is also a jitter size effect, also using CSS3 to complete.

@keyframes touch {
    0%,
    50%,
    100% {
        transform: scale(1); 25%} {transform: scale(0.75); 75%} {transform: scale(1.25); }}Copy the code

Now that the animation is done, how do I get it to trigger, right, by checking the box.

input[type="checkbox"]{&:checked+svg{
        animation: touch 0.7 s forwards ease-in;
        .heart{
            animation: run .75s 0.1 sforwards linear; }}}Copy the code

Check that the checkbox is activated and the sibling element behind it can trigger the animation.

4. Diffusion circle animation

Maybe just learning CSS students will have doubts, we put the round box without any elements, just positioned in the middle of the heart, how can do eight circles, if you use pseudo-class is also two ah, next, let’s see the following performance:

@keyframes circle-move {
    0% {
        box-shadow: -10px 0 0 3px var(--gray-color), 0 -10px 0 3px var(--gray-color),
            0 10px 0 3px var(--gray-color), 10px 0 0 3px var(--gray-color),
            7px 7px 0 3px var(--gray-color), -7px 7px 0 3px var(--gray-color),
            7px -7px 0 3px var(--gray-color), -7px -7px 0 3px var(--gray-color);
        opacity: 1; 45%} {box-shadow: -120px 0 0 5px var(--skin-color),
            0 -120px 0 5px var(--skin-color), 0 120px 0 5px var(--skin-color),
            120px 0 0 5px var(--skin-color), 90px 90px 0 5px var(--skin-color),
            -90px 90px 0 5px var(--skin-color), 90px -90px 0 5px var(--skin-color),
            -90px -90px 0 5px var(--skin-color);
        opacity:.8; 80%} {box-shadow: -120px 0 0 7px var(--skin-color),
            0 -120px 0 7px var(--skin-color), 0 120px 0 7px var(--skin-color),
            120px 0 0 7px var(--skin-color), 90px 90px 0 7px var(--skin-color),
            -90px 90px 0 7px var(--skin-color), 90px -90px 0 7px var(--skin-color),
            -90px -90px 0 7px var(--skin-color);
        opacity:.5; 100%} {box-shadow: -120px 0 0 3px var(--skin-color),
            0 -120px 0 3px var(--skin-color), 0 120px 0 3px var(--skin-color),
            120px 0 0 3px var(--skin-color), 90px 90px 0 3px var(--skin-color),
            -90px 90px 0 3px var(--skin-color), 90px -90px 0 3px var(--skin-color),
            -90px -90px 0 3px var(--skin-color);
        opacity: 0; }}Copy the code

You can use the first two parameters of box-shadow to set the x and y axes, the third attribute to be 0, the fourth attribute to be its size, and the last attribute to be color. This way, when writing to the CSS animation, eight circles will appear, and the movement color will disappear without creating new elements.

input[type="checkbox"]{&:checked ~ .heart-circle {
        animation: circle-move 1s 0.2 slinear; }}Copy the code

Of course, we also need to perform the animation after binding checkbox activation time like Hearts, so that our complete case is implemented, online demonstration

conclusion

This case is one of my early works. Although it looks very simple, there are still a lot of things to learn from, so LET’s break it down. CSS itself is not difficult but requires repeated practice and updating, sometimes it can write js long logical operations with a few sentences. So don’t look down on CSS, it is also one of the core front-end technology, is the language of people, not language people, remember.