本文通过一个实例展示了如何使用HTML和CSS实现鼠标悬停时元素的位移、旋转和缩放过渡效果。通过设置`transition`属性和`hover`伪类，详细解释了CSS的`transform`属性和过渡效果的配置方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px; /*设置宽度为200PX*/
}
.box{
height: 200px; /*设置高度为200PX*/
}
#box{
background: skyblue; /*设置背景颜色为天蓝色*/
transition: all 2s; /*设置过渡，要求对所有的样式进行变化，指定变化的时间是2s；*/
}
.box:hover{
transform:translateY(200px) rotateZ(360deg) scale(0.5,0.5); /*注意：一定要空格隔开每个转换值的设置；*/
}
</style>
</head>
<body>
<div id="box" class="box"></div>
</body>
</html>
&l
最低0.47元/天 解锁文章
1505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
