🌈个人主页：前端青山
🔥系列专栏：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 选择器分别设置不同的初始位置和悬停效果。
动态效果
通过 transform 和 transition 属性，我们可以轻松地为图片添加动态效果。transform 属性用于改变元素的形状、大小或位置，而 transition 属性用于定义过渡效果的时间和方式。
例如，当鼠标悬停在 .bigbox 上时，第一张图片会缩小到 0.7 倍大小，其他图片会移动到新的位置。这些效果通过 transform 和 transition 属性实现，使得页面更加生动有趣。
总结
本文通过一个具体的例子，展示了如何使用 CSS 实现图片展示与交互效果。通过合理的 HTML 结构和详细的 CSS 样式，我们可以为页面添加丰富的动态效果，提升用户体验。希望本文对您有所帮助，如果您想进一步学习 CSS 动画效果，可以查阅相关的文档和教程。