简介
在本实验中,我们将学习如何使用 CSS 属性创建一个悬停效果,使图像旋转。通过使用 scale()
、rotate()
和 transition
,当用户将鼠标悬停在父元素上时,我们可以使图像看起来旋转。我们还将使用 overflow: hidden
来隐藏图像变换中多余的部分,从而创建一个简洁精致的效果。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将学习如何使用 CSS 属性创建一个悬停效果,使图像旋转。通过使用 scale()
、rotate()
和 transition
,当用户将鼠标悬停在父元素上时,我们可以使图像看起来旋转。我们还将使用 overflow: hidden
来隐藏图像变换中多余的部分,从而创建一个简洁精致的效果。
虚拟机中已经提供了 index.html
和 style.css
。
要在悬停时为图像创建旋转效果,当鼠标悬停在父元素(应为 <figure>
元素)上时,使用 scale()
、rotate()
和 transition
属性。为确保图像变换不会超出父元素范围,在父元素的 CSS 中添加 overflow: hidden
。以下是一个 HTML 和 CSS 代码示例:
<figure class="hover-rotate">
<img src="https://picsum.photos/id/669/600/800.jpg" />
</figure>
.hover-rotate {
overflow: hidden;
margin: 8px;
min-width: 240px;
max-width: 320px;
width: 100%;
}
.hover-rotate img {
transition: all 0.3s;
box-sizing: border-box;
max-width: 100%;
}
.hover-rotate:hover img {
transform: scale(1.3) rotate(5deg);
}
请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已经完成了“悬停时图像旋转”实验。你可以在 LabEx 中练习更多实验来提升你的技能。