html 图片鼠标过去后旋转

2024-06-01 分类：HTML / 技术文章阅读(364) 评论(0)

html 图片鼠标过去后旋转

要实现HTML图片鼠标走过后旋转，可以使用CSS3的transition属性和:hover伪类。以下是一个简单的示例：

HTML:

<div class="image-container"><img src="image.jpg" alt="Sample Image"></div>

CSS:

.image-containerimg {transition: transform 0.5s ease; /* 设置旋转动画 */}.image-containerimg:hover {transform: rotate(360deg); /* 鼠标走过时旋转360度 */}

在这个例子中，当鼠标悬停在图片上时，图片会在0.5秒内平滑地旋转360度。transform属性是CSS3的一部分，用于定义变换，而rotate函数则用于旋转。transition属性定义了变形发生的时间长度和效果。