img:hover { opacity: 0.5; }
以上代码实现的是鼠标经过某个图片时,使图片透明度变为 0.5 的效果。这是通过使用伪类 :hover 来实现的。伪类是 CSS 中用来选择元素的特殊关键字,用它们可以选择非常具有特定状态的元素。在本文中,大家使用伪类 :hover 来选择鼠标经过图片时的状态。
通过改变透明度来实现鼠标经过时改变图片的效果只是其中之一。除此之外,还可以通过改变图片的大小、位置、旋转角度等方式来实现更加有趣的效果。比如说,大家可以使用下面的代码来实现鼠标经过时对图片进行顺时针旋转的效果。
img:hover { transform: rotate(20deg); }
上面代码中的 transform 属性是 CSS3 中用来对元素进行 2D 或者 3D 变换的一个属性,它可以实现很多有趣的效果。在本例中,大家使用 rotate 函数将图片进行了顺时针旋转了 20 度。
总之,通过 CSS 来实现鼠标经过时改变图片的效果是一种非常方便和实用的方法。除了上面介绍的透明度和旋转效果之外,还有很多其他的方式可以用来实现同样的效果,可以根据实际需求来选择。希望这篇文章能够帮助到大家。