css3 hover效果

CSS3的:hover伪类可以用来创建鼠标悬停时的效果。以下是一个简单的例子，演示了如何使用CSS3的transform属性和:hover伪类来创建一个鼠标悬停时放大的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effect Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    margin: 30px;
    transition: transform 0.3s ease-in-out;
  }
 
  .box:hover {
    transform: scale(1.1);
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

在这个例子中，.box类定义了一个方框，并设置了一个过渡效果，使得transform属性的改变在0.3秒内平滑进行。当鼠标悬停在这个方框上时，:hover伪类将会被激活，方框将会通过transform: scale(1.1);放大10%。

评论已关闭

推荐阅读