css3悬浮自定义 |css 设置div文字

<div class="box">
<p>当偶悬浮在这个盒子上时，它的颜色将变为红色</p>
</div>

在上面的代码中，“box”类是要附加到盒子元素上的。大家将在CSS中定义该类。现在，大家可以使用以下CSS样式来为其添加悬浮效果：

.box {
background-color: blue;
padding: 20px;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: red;
}

在上面的CSS代码中，大家首先定义了“box”类的背景颜色和内边距。然后，大家使用了CSS3的过渡效果来定义背景颜色从蓝色到红色的过渡。最后，大家使用:hover伪类来定义悬浮时的背景颜色。

要添加更多的自定义悬浮效果，你可以使用CSS3过渡、变形、阴影等技术。例如：

.box {
background-color: blue;
padding: 20px;
transition: background-color 0.5s ease;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}
.box:hover {
background-color: red;
transform: rotate(90deg);
box-shadow: none;
}

在上面的CSS代码中，大家添加了一个阴影和一个旋转变形。当鼠标悬浮在盒子上时，盒子将旋转90度并且阴影将消失。

总之，CSS3悬浮自定义是一种非常棒的技术，它可以让你创建出令人印象深刻的交互式网站元素。通过使用CSS3过渡、变形、阴影等技术，你可以轻松地添加更多的自定义效果。试试吧！