CSS to achieve Tik Tok subscription button animation effect

I was watching Tik Tok some time ago and thought the button animation when following was very beautiful, plus I have been learning front-end knowledge recently. So I thought about how to implement it myself, and the final effect was okay, but I felt that what I did was not good enough. For reference only.

🍻 Final effect

Final result

💡 Ideas

Use jQuery's toggleClass() method to add and remove the class active
Set styles for the original and active elements respectively, use the CSS transition attribute to define the change time, speed, etc.
Use CSS animation to set change animation for active elements

👨‍💻Implementation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
	<!-- For simplicity, div is used. Actually, you can also use button, you need to set the style to make it look good^_^-->
	<!-- Haven't learned <svg> yet, maybe using <svg> will give you better results-->
    <div id="followBtn">
        <div id="line1"></div>
        <div id="line2"></div>
    </div>
    <script src="index.js"></script>
</body>
</html>

$(function () { // jQuery entry function $('#followBtn').click(function (e) { // Bind click event $('#followBtn').toggleClass('active');
        $('#line1').toggleClass('active');
        $('#line2').toggleClass('active');
    });
})

CSS

body {
    width: 1024px;
    margin: 0 auto; /* Center */
}

#followBtn {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    border-radius: 100px; // Make the div circular background-color: #ccc;
    transition: all linear .5s; // Define the properties of the transition animation when the style is converted}

#followBtn.active {
    background-color: crimson;
}

#line1 {
    position: absolute; /*Absolute positioning, positioning is based on the nearest positioned (relative, absolute, fixed) ancestor element*/
    left: 25px;
    top: 46px;
    display: block;
    width: 50px;
    height: 8px;
    border-radius: 5px;
    background-color: crimson;
    transition: all linear .5s;
}

#line2 {
    position: absolute;
    left: 25px;
    top: 46px;
    display: block;
    width: 50px;
    height: 8px;
    border-radius: 8px;
    background-color: crimson;
    transform: rotate(90deg); /* Rotate 90 degrees */
    transition: all linear .5s;
}

#line1.active {
    background-color: #ccc;
    /*Trigger the animation, forwards means that after the animation ends, the element style is retained as the style of the last keyframe of the animation*/
    animation: line1 .5s ease-in-out forwards;
}

#line2.active {
    background-color: #ccc;
    animation: line2 .5s ease-in-out forwards;
}

/* @keyframes defines the animation*/
@keyframes line1 {
    50% {
        width: 8px;
        height: 8px;
        left: 20px;
        top: 52px;
        border-radius: 8px;
    }
    100% {
        width: 30px;
        left: 20px;
        top: 52px;
        transform: rotate(45deg);
    }
}

@keyframes line2 {
    50% {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        left: 35px;
    }
    100% {
        width: 50px;
        left: 35px;
        transform: rotate(-45deg);
    }
}

Dividing line 👇👇👇Use svg to draw the check mark✔🍻The final effect

insert image description here

👨‍💻Implementation

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <button id="followBtn">
        <div class="line"></div>
        <div class="line"></div>
        <!-- Draw using svg -->
        <!-- stroke-linecap sets the corners of the polyline to be rounded -->
        <!-- stroke-linejoin sets the corners of the polyline to rounded -->
        <svg width="70px" height="70px" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none">
            <polyline points="10,37 30,57 60,17" style="stroke: crimson;"></polyline>
        </svg>
    </button>
    <script src="index.js"></script>
</body>

</html>

❗❗❗Be sure to use jQuery 3. Versions below 3 have a bug when operating svg elements (adding classes). 3 fixes this problem.

$(function () {
    $('#followBtn').click(function (e) {
        $('#followBtn').toggleClass('active');
        $('.line').toggleClass('active');
        $('polyline').toggleClass('active');
    });
})

CSS

body {
    width: 1024px;
    margin: 0 auto;
}

#followBtn {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    border: none;
    border-radius: 100px;
    background-color: crimson;
    transition: all linear .5s;
}

#followBtn:focus {
    outline: none; /* No blue box will appear when clicking in the browser*/
}

#followBtn.active {
    background-color: #ccc;
}

.line {
    position: absolute; /*Absolute positioning, positioning is based on the nearest positioned (relative, absolute, fixed) ancestor element*/
    left: 25px;
    top: 46px;
    width: 50px;
    height: 8px;
    border-radius: 8px;
    background-color: #ccc;
    transition: ease-in 0;
}

.line:nth-child(1) {
    transform: rotate(90deg);
}

.line.active {
    animation: fade .5s forwards;
}

polyline
    /* The stroke-dasharray property sets the line gap to form a curve.
     * When the gap is large enough, the line will appear to be hidden * The stroke-dashoffset property specifies the distance from the dash pattern to the start of the path. When it is 0, the line is completely visible */
    stroke-dasharray: 80px;
    stroke-dashoffset: 80px;
}

polyline.active {
    animation: show .5s forwards;
    animation-delay: .5s;
}

@keyframes show {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fade {
    to {
        opacity: 0;
        transform: rotate(360deg) scale(0.5, 0.5);
    }
}

👨‍🎓Insights

Ordinary HTML elements and SVG elements are rotated differently:

transform-origin of a normal HTML element defaults to its center. transform-origin of an SVG element defaults to the upper left corner of the SVG canvas.

HTMLvsSVG

To remove the blue box after clicking the button, you can set outline: none;

jQuery versions below 3 cannot correctly modify the class of SVG elements.

//.attr() method is valid for SVG, so if you must use jQuery // use $("#item").attr("class", "oldclass newclass"); // instead of .addClass("newclass")
// Use $("#item").attr("class", "oldclass"); // instead of .removeClass("newclass")
// Native JS solution var element = document.getElementById("item");
// Use element.setAttribute("class", "oldclass newclass");
// Use element.setAttribute("class", "oldclass");

🔗References

Transforms on SVG Elements

jQuery SVG, why can't I addClass?

This is the end of this article about how to use CSS to achieve the Douyin subscription button animation effect. For more related CSS Douyin subscription button animation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: A detailed introduction to HTML page loading and parsing process

>>: Tutorial on building a JMeter+Grafana+influxdb visual performance monitoring platform in docker environment