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)

Summary of considerations for writing web front-end code

svg+css or js to create tick animation effect

Summary of considerations for writing web front-end code

SQL injection vulnerability process example and solution

Ten Experiences in Web Design in 2008

Correct way to write empty links to prevent page jumps after clicking a href # problem

Use tomcat to deploy SpringBoot war package in centos environment

TypeScript uses vscode to monitor the code compilation process

A brief discussion on the role of Vue3 defineComponent

How to change apt-get source in Ubuntu 18.04

Share the pitfalls of MySQL's current_timestamp and their solutions

Learn MySQL in a simple way

Recommend

Achieve 3D flip effect with pure CSS3 in a few simple steps

TypeScript problem with iterating over object properties

The most convenient way to build a Zookeeper server in history (recommended)

How to add configuration options to Discuz! Forum

React implements double slider cross sliding

WeChat applet learning notes: page configuration and routing

Research on the problem of flip navigation with tilted mouse

Detailed explanation of JavaScript Reduce

Thoughts on truncation of multi-line text with a "show more" button

JavaScript to achieve simple provincial and municipal linkage

CSS writing format, detailed explanation of the basic structure of a mobile page

Windows 10 and MySQL 5.5 installation and use without installation detailed tutorial (picture and text)

Native js drag and drop function to create a slider example code

Web Design Tutorial (3): Design Steps and Thinking

HTML checkbox Click the description text to select/uncheck the state