CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动
warning:
这篇文章距离上次修改已过197天，其中的内容可能已经有所变动。
以下是一个简单的示例，展示了如何使用CSS3创建一个鼠标悬停时的动画效果，包括旋转、放大和缩小以及移动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Animation Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
margin: 30px;
transition: transform 0.5s, background-color 0.5s; /* 过渡效果 */
}
.box:hover {
transform: rotate(360deg) scale(1.2) translate(20px, 20px); /* 变换效果 */
background-color: #0f0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>在这个例子中，.box 类定义了一个方框，并设置了基本的过渡效果。当鼠标悬停在方框上时，:hover 伪类触发，方框会旋转360度、放大1.2倍，并沿x轴和y轴各移动20像素，同时背景色改变为绿色。
评论已关闭