CSS是网页设计中非常重要的一部分,尤其是鼠标经过效果。其中之一就是鼠标经过变换图片。
img:hover { transform: rotate(360deg); }
上面的代码是一种简单的旋转效果,当鼠标经过图片时,它将以360度,即一整圈的方式旋转。我们也可以使用其他样式或属性来实现不同的变换效果,比如对图片进行缩放或平移。
但图片经过变换的效果不只是静态的,我们也可以使用CSS动画,使其更具有视觉吸引力。
img:hover { animation: spin 2s linear; } @keyframes spin { 100% { transform: rotate(360deg); } }
上面的代码是一个使用CSS动画实现图片旋转的例子。当鼠标经过图片时,图片将沿着一个线性路径旋转2秒钟。
总之,使用CSS鼠标经过变换图片是一种简单而有效的方式,可以让你的网页更加生动和有趣。