css3悬浮凸起特效

CSS3提供的动画和特效可以让我们在网页设计中实现更为生动和丰富的效果，其中悬浮凸起特效就是一种常见而又实用的效果。

悬浮凸起特效可以让按钮在鼠标悬浮时稍微上移并带上阴影效果，使得按钮看起来更为立体且有足够的反馈，增强用户体验。下面是基于CSS3实现悬浮凸起特效的样式代码：

.btn {
    display: inline-block;
    position: relative;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    text-decoration: none;
}
.btn:hover {
    top: -5px;
    Box-shadow: 0px 10px 20px rgba(0,0.2);
}
.btn:active {
    top: 0;
    Box-shadow: none;
}

可以看到，我们首先定义了一个按钮的基本样式。在悬浮时，我们使用:hover伪类设置按钮上移5个像素，同时添加了0px 10px 20px的投影效果，即我们常说的阴影。这里的rgba(0,0.2)表示黑色半透明投影，最后一个参数0.2表示不透明度为20%。

同时，在按钮点击时，我们使用:active伪类将按钮的top恢复为0，同时阴影效果消失。这样，就实现了一个简单却实用的按钮悬浮凸起特效。

这里，我们仅仅是演示了一个简单的按钮样式，并不代表你不能把这个特效玩出更多花样。例如，你可以尝试在:hover时加入旋转、缩放或渐变效果，来创造出更复杂的效果。总之，CSS3提供了各种动画和特效的组合，创意的灵感掌握在你的手中。