[分享]css3悬浮图标特效

CSS3悬浮图标特效是网页设计中常用的特效之一，它可以使页面看起来更加生动和活泼。

.icon {
  width: 30px;
  height: 30px;
  font-size: 20px;
  color: #fff;
  background-color: #333;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  transition: all .3s ease-in-out;
}

.icon:hover {
  transform: rotate(360deg) scale(1.2);
  box-shadow: 0 0 10px rgba(0,0,0,.3);
} 

在上面的代码中，我们定义了一个.icon样式，设置了它的宽度、高度、字体大小、背景颜色、圆角等属性。同时为了实现悬浮效果，我们添加了一个:hover伪元素，当我们鼠标悬浮在图标上时，它会自动旋转360度并且放大1.2倍，同时添加了一个投影效果。

可以在网页中添加多个图标来实现更加丰富的效果。

<div class="container">
  <div class="icon">A</div>
  <div class="icon">B</div>
  <div class="icon">C</div>
  <div class="icon">D</div>
</div> 

通过上述代码，我们可以在一个名为container的div容器中添加多个.icon类的图标元素，从而实现多个图标的显示。

CSS3悬浮图标特效非常实用，可以让网页设计更加生动，同时也可以提高用户体验。