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)