How to achieve height gradient effect in css3-Front-end Q&A-php.cn

How to achieve height gradient effect in css3

WBOY

Release： 2022-04-28 17:54:51

Original

3182 people have browsed it

Implementation method: 1. Use the "element {animation: name time}" statement to bind animation to the element and set the time required for the animation; 2. Use "@keyframes name {100%{height: gradient" Height value;}}" statement, set the animation action of height change to achieve the gradient effect.

How to achieve height gradient effect in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to achieve high gradient effect in css3

It can be achieved by using animation effect.

The animation attribute can set the animation effect of the element:
animation-name specifies the keyframe name that needs to be bound to the selector. .
animation-duration Specifies the time it takes to complete the animation, in seconds or milliseconds.
animation-timing-function specifies the speed curve of animation.
animation-delay Specifies the delay before the animation starts.
animation-iteration-count specifies the number of times the animation should play.
animation-direction specifies whether the animation should be played in reverse in turn.

The syntax is:

animation: name duration timing-function delay iteration-count direction;

Copy after login

Height gradients can use the transform attribute

The transform attribute applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.

The example is as follows:

<!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">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s;
        }
        @keyframes fadenum{
   100%{height:300px;}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copy after login

Output result:

How to achieve height gradient effect in css3

##(Learning video sharing:

css video tutorial）

The above is the detailed content of How to achieve height gradient effect in css3. For more information, please follow other related articles on the PHP Chinese website!