<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>转换</title>
<style type="text/css">
.box1{
width:200px;
height:200px;
background-color:pink;
transition:all .3s linear;
}
.box1:hover{
/* transition:转换 */
/* translatex():水平方向位移;
translatey():垂直方向位移;
translate(x,y):水平方向位移x,垂直方向位移y; */
transform:translate(500px,300px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
`````
转换
这篇博客介绍了如何使用CSS实现一个盒子在鼠标悬停时进行水平和垂直方向的位移效果。通过示例代码展示了transition和transform属性的应用,特别是transform的translate函数,用于控制元素的位置变化。
摘要由CSDN通过智能技术生成