[分享]css3悬浮div

CSS3中的悬浮效果为我们展示了一个诱人的互动效果，用户将鼠标移动到一个对象上时，该对象会显示出不同的状态。比如，照片可以放大或者缩小，导航菜单可以切换到下一个选项卡，或者是一个按钮可以改变自己的颜色...

CSS3中的悬浮效果为我们展示了一个诱人的互动效果，用户将鼠标移动到一个对象上时，该对象会显示出不同的状态。比如，照片可以放大或者缩小，导航菜单可以切换到下一个选项卡，或者是一个按钮可以改变自己的颜色或形状。

实现悬浮效果使用CSS3实现，可以让你获得很好的控制细节，通过伪类选择器: hover，控制元素的外观与行为。伪类选择器可以应用于多种元素类型，如a标签、button标签、div标签等。

示例代码如下：

div {
    width: 150px;
    height: 150px;
    background-color: orange;
    transition: transform 1s;
    -webkit-transform: translateY(-75px);
    position: absolute;
    left: 50%;
    margin-left: -75px;
    bottom: 0;
}

div:hover {
    transform: translateY(-150px);
    -webkit-transform: translateY(-150px);
} 

上述代码中，我们创建了一个div标签，它的宽度和高度都是150像素，背景颜色是橙色。利用transition属性，实现平滑的过渡效果，并使用-webkit-transform属性添加translateY（）样式来移动标签的位置。在悬浮时，我们利用伪类选择器:hover来改变标签位置，使之移动到上面去。

CSS3悬浮效果为我们提供了一个非常有用的工具来创造更加动态的，交互式的网页和应用程序。 作为Web开发人员，了解和掌握这些新的CSS3特性将有助于您创建更丰富多样的网站和应用程序，提高用户的体验。