css 图片特效

CSS 对于网页设计来说是非常重要的，可以为网页添加很多漂亮的特效。在其中一个特效方面，即图片特效，CSS 也提供了很好的解决方案。下面一起来学习一下吧。

img {
  border-radius: 50%;
  Box-shadow: 0 0 10px rgba(0,0.3);
}

img:hover {
  transform: scale(1.1);
  Box-shadow: 0 0 20px rgba(0,0.5);
}

如上所示，这是一个可以让图片实现圆形和阴影效果，并在鼠标悬浮时有缩放和更明显的阴影效果的 CSS 样式表。

.item {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.item img {
  transition: transform 0.5s ease;
}

.item:hover img {
  transform: scale(1.1);
}
.item:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: rgba(0,0.6);
  transition: width 0.5s ease;
}

.item:hover:after {
  width: 100%;
}

这是另外一个可以让图片具有鼠标悬浮变暗并放大的效果的 CSS 样式表。通过 `:hover` 伪类控制 `img` 和 `:after` 的样式，实现了这个效果。

以上只是两种示例，其实 CSS 可以实现的图片特效还有很多，只要善用 CSS，相信你可以为网页添加更多更漂亮的效果。