Home >Web Front-end >CSS Tutorial >How to set div to move upward with css
How to set div to move upward with css
- WBOYOriginal
- 2021-12-02 19:03:1715125browse
In CSS, you can use the transform and transition attributes to set the div to move upward. You only need to add the "transform:translateY(-upward movement distance value);transition:all animation time ease-in;" style to the div element. That’s it.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to set div to move upward in css
Use the transform and transition attributes to achieve the effect of div moving upward.
The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.
The transition attribute is used to set the animation effect of div movement.
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:hover {
transform:translateY(-8px);
}
.div {
width:100px;
height:80px;
line-height: 80px;
/*动画的过渡效果*/
transition: all .25s ease-in;
border:0;
margin:10px;
background-color: pink;
float: left;
font-size: 12px;
text-align: center;
}
</style>
<head>
<body>
<div class="div"></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set div to move upward with css. For more information, please follow other related articles on the PHP Chinese website!