img:hover { transform: scale(1.2); transition: transform 0.5s ease; }
上面这段代码实现的是当鼠标悬停在图片上时,图片放大1.2倍的效果,同时过渡时间为0.5秒,过渡方式为缓动。
除此之外,CSS还可以实现很多有趣的图片动态效果,比如:
img { filter: grayscale(1); transition: filter 0.5s ease; } img:hover { filter: grayscale(0); }
这段代码实现的是图片灰度化,当鼠标悬停在图片上时,图片恢复原色,过渡时间为0.5秒,过渡方式为缓动。
更多有关CSS图片动态效果的源码可以在互联网上搜索,也可以自己动手尝试制作出更酷炫的效果。