css3 svg 图标

CSS3和SVG图标是许多网站和应用程序的重要组成部分。SVG，或可缩放矢量图形，是一种XML格式的图像格式，可以声成任意大小而不失去其清晰度。与像素图相比，SVG图标非常适合在高分辨率和多种设备上使用。CSS3则为SVG图标提供了更多的设计和动画选项。

.icon {
  width: 50px;
  height: 50px;
  background-color: #333;
  fill: #fff;
}

使用CSS3和SVG来创建图标可以是简单的，只需要几行代码。在上面的代码中，我们创建了一个50px x 50px的方块，其填充颜色为白色，背景颜色为深灰色。这个元素可以像其他标签一样使用，例如作为链接，通过放置一个可点击的链接在里面，并在CSS中设置:hover样式来创建鼠标指向的效果。

 

.icon:hover {
  background-color: #fff;
  fill: #333;
}

我们还可以使用CSS3的transition属性来创建平滑的动画效果。在这个例子中，当用户将鼠标悬停在元素上时，它会从黑色转换为白色，图标的填充颜色也会从白色转为黑色。注意，使用SVG图标时，我们需要使用”fill”属性而不是”background-color”。

总而言之，使用CSS3和SVG图标可以让我们创建现代化的，可缩放的图像，以及对鼠标的动画效果。他们可以为网站和应用程序带来更好的用户体验，因此在设计中应该有所注意。