How to achieve the lengthening effect when the mouse moves up in CSS3? (Pictures + Videos)-CSS Knowledge-php.cn

How to achieve the lengthening effect when the mouse moves up in CSS3? (Pictures + Videos)

藏色散人

Release： 2019-11-30 16:37:44

Original

6565 people have browsed it

This article mainly introduces you to the method of using css3 to achieve the variable length effect when the mouse moves in.

In front-end page design, the function of CSS is extremely powerful. As long as you use it well, you can achieve various wonderful dynamic effects on many websites. So in the previous article, I also shared with you some methods of using CSS to achieve animation effects, such as [How to achieve rotation and movement effects in Css3 animation? 】【How to achieve the slow enlargement effect of images when hovering the mouse in css3?】Wait for the introduction of knowledge points, friends in need can choose to refer to it.

Let’s combine it with a simple code example to introduce to you the css3 method to achieve the effect of making the div longer when the mouse moves into the div.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Css3实现鼠标移上变长特效</title>
<head>
    <style>
.hover{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: red;
    margin-top: 100px;
    margin-left: 100px;
    transition: width 2s;
}
        .hover:hover{
            background: blue;
            width: 500px;
        }
 </style>
</head>
<body>

<div class="hover">
    hover
</div>
</body>
</html>

Copy after login

In fact, this effect is very basic and simple. Mainly master the use of :hover selector and transition.

:hover selector is used to select the element on which the mouse pointer is floating.

Transition transition is a composite attribute, including the four sub-properties of transition-property, transition-duration, transition-timing-function, and transition-delay. A complete transition effect is completed through the cooperation of these four sub-properties

The effect achieved by the above code in the foreground is as shown below:

How to achieve the lengthening effect when the mouse moves up in CSS3? (Pictures + Videos)

This article This article is an introduction to the css3 method to achieve the variable length effect when the mouse moves in. It is also very simple. I hope it will be helpful to friends in need!

If you want to learn more about front-end related knowledge, you can follow the PHP Chinese website CSS3 Video Tutorial, CSS Video Tutorial, Bootstrap Tutorial, etc. Related tutorials, everyone is welcome to refer to and study!

More cool CSS3, html5, javascript special effects codes, all in: javascript special effects collection

The above is the detailed content of How to achieve the lengthening effect when the mouse moves up in CSS3? (Pictures + Videos). For more information, please follow other related articles on the PHP Chinese website!