CSS 动画效果实现：图片展示与交互

🌈个人主页：前端青山
🔥系列专栏：Css篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Css篇专栏内容:CSS 动画效果实现：图片展示与交互

前言

在现代网页设计中，动态效果能够显著提升用户体验。本文将通过一个具体的例子，展示如何使用 CSS 实现图片展示与交互效果。我们将创建一个包含多个图片的布局，并通过 CSS 的 transform 和 transition 属性为图片添加动态效果。文章将分为以下几个部分：

HTML 结构：介绍页面的基本结构。
CSS 样式：详细解析每个 CSS 规则的作用。
动态效果：解释如何通过 CSS 实现图片的动态效果。
总结：回顾整个过程并提供进一步学习的建议。

HTML 结构

首先，我们来看一下页面的基本 HTML 结构。这个结构包含一个外层的 .box 容器，内部有四个 .bigbox 容器，每个容器内包含多张图片。

html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 动画效果实现：图片展示与交互</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/work.css">
</head>
<body><div class="box"><div class="bigbox"><img src="img/con1-1.jpg" alt=""><img src="img/con1-2.jpg" alt=""><img src="img/con1-3.jpg" alt=""><img src="img/con1-4.jpg" alt=""><img src="img/con1-5.jpg" alt=""><img src="img/con1-6.jpg" alt=""></div><div class="bigbox"><img src="img/con2-1.jpg" alt=""><img src="img/con2-2.jpg" alt=""><img src="img/con2-3.jpg" alt=""><img src="img/con2-4.jpg" alt=""><img src="img/con2-5.jpg" alt=""><img src="img/con2-6.jpg" alt=""></div><div class="bigbox"><img src="img/con3-1.jpg" alt=""><img src="img/con3-2.jpg" alt=""><img src="img/con3-3.jpg" alt=""><img src="img/con3-4.jpg" alt=""><img src="img/con3-5.jpg" alt=""><img src="img/con3-6.jpg" alt=""></div><div class="bigbox pic"><img src="img/con4-1.jpg" alt="" class="pic1"><img src="img/con4-2.jpg" alt=""><img src="img/con4-3.jpg" alt=""></div></div>
</body>
</html>

CSS 样式

接下来，我们详细解析每个 CSS 规则的作用。

基本样式重置

html, body, h1, h2, h3, h4, h5, h6, div, ul, ol, li, dl, dt, dd, p {margin: 0;padding: 0;
}
ul, ol, li {list-style: none;
}
a {text-decoration: none;color: #333;
}
img, input, select, iframe, select {vertical-align: middle;
}
.fl {float: left;
}
.fr {float: right;
}
.clear::after {content: "";display: block;clear: both;
}
input, select, textarea {outline: none;border: none;
}

这些规则主要用于重置浏览器默认的样式，确保页面在不同浏览器中表现一致。

容器样式

css.box {width: 1200px;margin: 0 auto;box-sizing: border-box;
}
.bigbox {width: 500px;height: 390px;background: url(../img/bg.jpg);position: relative;overflow: hidden;float: left;margin: 10px 10px;
}

.box 是外层容器，宽度为 1200px 并居中显示。.bigbox 是每个图片容器，宽度为 500px，高度为 390px，背景图设置为 bg.jpg，并使用 position: relative 以便其子元素可以进行绝对定位。

图片样式

.bigbox > img:first-child {width: 400px;height: 300px;position: absolute;left: 30px;top: 40px;transform-origin: 0 0;transition: all 1s;
}
.bigbox:hover > img:first-child {transform: scale(0.7);
}

第一个图片的初始位置在左上角，宽度为 400px，高度为 300px。当鼠标悬停在 .bigbox 上时，图片会缩小到 0.7 倍大小。

.bigbox > img:nth-child(2) {width: 130px;height: 94px;position: absolute;right: 30px;top: -100px;transition: all 1s;
}
.bigbox:hover > img:nth-child(2) {width: 130px;height: 94px;position: absolute;right: 30px;top: 39px;
}

第二个图片的初始位置在右上角，宽度为 130px，高度为 94px。当鼠标悬停在 .bigbox 上时，图片会移动到新的位置。

其他图片的样式类似，通过 nth-child 选择器分别设置不同的初始位置和悬停效果。

特殊图片样式

.pic > img:first-child {width: 300px;height: 330px;
}
.pic:hover > img:first-child {transform: scale(0.8);
}

.pic 容器中的第一张图片在初始状态下宽度为 300px，高度为 330px。当鼠标悬停在 .pic 上时，图片会缩小到 0.8 倍大小。

.pic > img:nth-child(2) {width: 120px;height: 135px;top: -198px;left: 500px;position: absolute;
}
.pic:hover > img:nth-child(2) {width: 120px;height: 135px;position: absolute;top: 30px;left: 330px;
}

第二张图片的初始位置在右上角，宽度为 120px，高度为 135px。当鼠标悬停在 .pic 上时，图片会移动到新的位置。

其他图片的样式类似，通过 nth-child 选择器分别设置不同的初始位置和悬停效果。