CSS to achieve Tik Tok subscription button animation effect

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>

JS

$(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>

JS

âť—âť—âť—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

Recommend

How to automatically back up the mysql database regularly

We all know that data is priceless. If we don’t b...

A brief analysis of the relationship between various Tomcat logs and the segmentation of catalina.out files

The relationship between Tomcat logs A picture is...

How to install php7 + nginx environment under centos6.6

This article describes how to install php7 + ngin...

Example code for implementing WeChat account splitting with Nodejs

The company's business scenario requires the ...

How to use VIM editor in Linux

As a powerful editor with rich options, Vim is lo...

Right align multiple elements in the same row under div in css

Method 1: float:right In addition, floating will ...

Document Object Model (DOM) in JavaScript

Table of contents 1. What is DOM 2. Select elemen...

In-depth explanation of the principle of MySQL Innodb index

introduction Looking back four years ago, when I ...

Win10+Ubuntu 20.04 LTS dual system installation (UEFI + GPT) (pictures and text, multiple pictures warning)

Win10 installation (skip if already installed) Fo...

Vue3+el-table realizes row and column conversion

Table of contents Row-Column Conversion Analyze t...

How to manually install MySQL 5.7 on CentOS 7.4

MySQL database is widely used, especially for JAV...

Vue elementUI form nested table and verification of each row detailed explanation

Table of contents Effect display Code Link Key Co...

10 HTML table-related tags

In fact many people will say “I’ve seen that table...

Detailed explanation of prototypes and prototype chains in JavaScript

Table of contents Prototype chain diagram Essenti...

Docker installation and configuration image acceleration implementation

Table of contents Docker version Install Docker E...