Svg + CSS or JS to make the animation effect of tick

Time:2021-7-5

Before the boss let do a login can show a hook effect, baidu life and death search can’t see today in the B station to see a video actually has according to the demand to improve, nonsense, don’t say more, first see the effect!

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > tick animation
</head>
<body>
<div id="d1">
    <input type="checkbox" style="display: none" id="love1" />
    < label for = love1 "id = BTN1 > > complete < / label >
<svg width="200px" height="200px">
    <circle r="90" class="circle" fill="none" stroke="#2de540" stroke-width="10" cx="100" cy="100" stroke-linecap="round" transform="rotate(-90 100 100) " ></circle>
    <polyline  fill="none" stroke="#2de540" stroke-width="10" points="44,107 86,137 152,69" stroke-linecap="round" stroke-linejoin="round" class="tick" ></polyline>
</svg>
<h2 style="text-align: center; Width: 200px "> success</h2>

</div>
</body>
<!-- Here, introduce your local JQ -- >
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</html>

CSS code


h2 {
        font-family: Helvetica;
        font-size: 30px;
        margin-top: 20px;
        color: #333;
        opacity: 0;
    }
    input[type="checkbox"]:checked+ label ~ h2 {
        animation: .6s title ease-in-out;
        animation-delay: 1.2s;
        animation-fill-mode: forwards;
    }
    .circle {
        stroke-dasharray: 1194;
        stroke-dashoffset: 1194;
    }
    input[type="checkbox"]:checked + label + svg .circle {
        animation: circle 1s ease-in-out;
        animation-fill-mode: forwards;
    }
    .tick {
        stroke-dasharray: 350;
        stroke-dashoffset: 350;
    }
    input[type="checkbox"]:checked + label+ svg .tick {
        animation: tick .8s ease-out;
        animation-fill-mode: forwards;
        animation-delay: .95s;
    }
    @keyframes circle {
        from {
            stroke-dashoffset: 1194;
        }
        to {
            stroke-dashoffset: 2388;
        }
    }
    @keyframes tick {
        from {
            stroke-dashoffset: 350;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
    @keyframes title {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    label {
        display: inline-block;
        height: 38px;
        width: 38px;
        line-height: 38px;
        padding: 0 18px;
        background-color: #1E9FFF;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
    }
    #d1 {
        display: flex;
        justify-content: center;
        min-height: 100px;
        flex-direction: column;
    }

This should be the end of writing, but we are not likely to use the checkbox to switch the display of animation effect when we really implement the function. Generally, we still need to operate the animation effect by buttons. Here is the code of JQ operation. Animation() is better, but I’m Xiaobai, so I’m lazy (PS: OK, actually I won’t) directly use. CSS ()

Javascript code

$("#btn1").on("click",function () {
       If ($(this). Text() = = "done"){
           $(".circle").css({'animation':'circle 1s ease-in-out','animation-fill-mode':'forwards'});
           $(".tick").css({'animation':'tick .8s ease-out','animation-fill-mode':'forwards','animation-delay':'.95s'});
           $("h2").css({'animation':'.6s title ease-in-out','animation-fill-mode':'forwards','animation-delay':'1.2s'})
           $(this). Text ("Cancel")
       }else{
           $(".circle").css({'animation':'none','animation-fill-mode':'none'});
           $(".tick").css({'animation':'none','animation-fill-mode':'none'});
           $("h2").css({'animation':'none','animation-fill-mode':'none'})
           $(this). Text ("finish")
       }
   });

So far, this article about SVG + CSS or JS to make the animation effect of hook is introduced here. For more related SVG CSS hook animation content, please search the previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!