CSS3 animation to achieve the effect of streamer button

In the process of learning CSS3, I found that many cool effects can be easily achieved using CSS3 attributes. Animation is a common attribute in CSS3 animation effects. Now let's learn how to use this property to create the following button effect with a streamer when the mouse is on the button~

insert image description here

Before that, let me briefly introduce the usage of the animation attribute.
animation: [animation-name (retrieve or set the name of the animation applied to the object)] || [animation-duration (retrieve or set the duration of the object animation)] || [animation-timing-function (retrieve or set the transition type of the object animation)] || [animation-delay (retrieve or set the delay time of the object animation)] || [animation-iteration-count (retrieve or set the number of loops of the object animation)] || [animation-direction (retrieve or set whether the object animation moves in reverse during the loop)]
Step 1 : Set the width, height and rounded border of the div to make it a rounded rectangle.
Step 2 : Set the background color to a gradient of three colors (the last color needs to be the same as the first color so that there will be no color jam during the flow), and set the background size to 400%. The main code is as follows

background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
    background-size: 400%;

Analysis: Now the background is a gradient of three colors, which is four times the size of the div, so the div only displays one color. The frame animation effect is used to control the movement of the background, and the animation attribute can make it flow continuously.

insert image description here

Step 3 : Use frame animation to control the horizontal movement of the background positioning. (@keyframes function: define animation. Simple animation can directly use the keywords from and to. Complex animation can use 0%~100% to set the corresponding animation effect in segments, that is, transition from one state to another)

@keyframes run{
            100%{
                background-position: 400% 0px;
            }
        }

Then use the pseudo class hover to achieve the animation effect when the mouse moves up~
Pseudo-class main code

@keyframes run{
            100%{
                background-position: 400% 0px;
            }
        }
        .div2:hover{
            animation: run 4s linear 0s infinite;
        }

Case complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div2{
            position:absolute;
            left: calc(50% - 150px); 
            top: calc(50% - 150px); 
            width: 300px;
            height: 100px;
            border-radius: 50px;
            text-align: center;
            background-color:aqua;
            line-height: 100px;
            background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
            background-size: 400%; 
        }
        @keyframes run{
            100%{
                background-position: 400% 0px;
            }
        }
        .div2:hover{
            animation: run 4s linear 0s infinite;
        }
    </style>
</head>
<body>
    <div class="div2">
        Let's Go
    </div>
</body>
</html>

Simple CSS3 streamer animation effect is realized

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

<<: Install Docker on CentOS 7

>>: About browser compatibility issues encountered and solutions (recommended)

Teach you how to subcontract uniapp and mini-programs (pictures and text)

CSS3 animation to achieve the effect of streamer button

Teach you how to subcontract uniapp and mini-programs (pictures and text)

Detailed explanation of the role of explain in MySQL

MySQL slow query method and example

Vue implements tab label (label exceeds automatic scrolling)

Understanding MySQL Locking Based on Update SQL Statements

Detailed explanation of MYSQL database table structure optimization method

Python Flask WeChat applet login process and login api implementation code

The problem of form elements and prompt text not being aligned

CSS3 realizes the mask barrage function

A brief discussion on the concat function in MySQL. How to add a string before or after a field in MySQL

Recommend

Application of HTML and CSS in Flash

Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection

Implementation code of html floating prompt box function

Disabled values that cannot be entered cannot be passed to the action layer

The latest graphic tutorial of mysql 8.0.16 winx64 installation under win10

Analysis and solution of data loss during Vue component value transfer

Detailed explanation of the payment function code of the Vue project

Tips for optimizing MySQL SQL statements

VUE implements timeline playback component

6 ways to implement the maximum and minimum values of an array in javascript

Teach you to connect to MySQL database using eclipse

Detailed explanation of Json format

Summary of Linux system user management commands

Implementation of HTML command line interface

Detailed explanation of the underlying implementation of descending index, a new feature of MySQL 8