svg+css or js to create tick animation effect

Previously, my boss asked me to make a program that could display a check mark after logging in, but I couldn’t find it on Baidu. Today, I saw a video at Bilibili that actually made some improvements based on the requirements. Without further ado, let’s take a look at the effect!

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox Animation</title>
</head>
<body>
<div id="d1">
    <input type="checkbox" style="display: none" id="love1" />
    <label for="love1" id="btn1" >Done</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>
<!--Introduce your local jq here-->
<script src="http://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;
    }

I should have ended here, but when we actually implement the function, it is unlikely to use a checkbox to switch the display of the animation effect. Generally, buttons are still needed to operate the animation effect. The following is the code for jq operation. In fact, it is better to use jq's .animate(), but I am a newbie, so I was lazy (ps: well, I don't know how to do it) and directly used .css()

JavaScript code

  $("#btn1").on("click",function () {
       if($(this).text()==="complete"){
           $(".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("Completed")
       }
   });

This is the end of this article about how to create a check mark animation effect using svg+css or js. For more relevant svg css check mark animation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Website Color Schemes Choosing the Right Colors for Your Website

>>: Use Docker Compose to quickly deploy ELK (tested and effective)