文章列表图片鼠标悬停向右逐渐稍微倾斜放大

教程文档 2024-07-21 999+

可应用到各类资源站或者博客。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.article {
    position: relative;
    overflow: hidden;
    width: 300px; /* 根据你的实际需求设置宽度 */
}

.article img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* 过渡效果，0.3秒 */
}

.article:hover img {
    transform: scale(1.1) rotate(3deg); /* 放大并稍微倾斜 */
}
</style>
</head>
<body>

<div class="article">
  <img src="article1.jpg" alt="Article 1">
  <h3>文章标题1</h3>
  <p>文章摘要或描述</p>
</div>

<div class="article">
  <img src="article2.jpg" alt="Article 2">
  <h3>文章标题2</h3>
  <p>文章摘要或描述</p>
</div>

<!-- 可以添加更多的文章块 -->

</body>
</html>

none

本站上的部份代码及教程来源于互联网，仅供网友学习交流，若您喜欢本文可附上原文链接随意转载。
我们无意侵害您的权益，请发送邮件至 nup#qq.com 反馈，我们将尽快处理。

本文链接：https://weizhishe.com/129.html