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
💡 Ideas
👨💻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
👨💻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:
To remove the blue box after clicking the button, you can set 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
Recommend
Detailed explanation of count without filter conditions in MySQL
count(*) accomplish 1. MyISAM: Stores the total n...
Native JS to implement drag position preview
This article shares with you a small Demo that ad...
A brief discussion on the VUE uni-app life cycle
Table of contents 1. Application Lifecycle 2. Pag...
HTML background color gradient effect achieved through CSS style
Effect screenshots: Implementation code: Copy code...
WeChat applet realizes horizontal and vertical scrolling
This article example shares the specific code for...
Five practical tips for web form design
1. Mobile selection of form text input: In the te...
Set the contenteditable attribute to edit the content of HTML tags (can replace textarea)
Copy code The code is as follows: <div content...
Vue globally introduces scss (mixin)
Table of contents 1. mixin.scss 2. Single file us...
Forty-nine JavaScript tips and tricks
Table of contents 1. Operation of js integer 2. R...
How to configure MySQL scheduled tasks (EVENT events) in detail
Table of contents 1. What is an event? 2. Enable ...
React error boundary component processing
This is the content of React 16. It is not the la...
Bootstrap 3.0 study notes page layout
This time we will mainly learn about layout, whic...
Reasons and solutions for MySQL failing to create foreign keys
When associating two tables, a foreign key could ...
MySQL storage engine basics
In the previous article, we talked about MySQL tr...
Detailed explanation of the difference between run/cmd/entrypoint in docker
In Dockerfile, run, cmd, and entrypoint can all b...