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

🌈个人主页：前端青山

🔥系列专栏：Css篇

🔖人终将被年少不可得之物困其一生

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

前言

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

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

HTML 结构

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

html 复制代码

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 规则的作用。

基本样式重置

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 复制代码

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 以便其子元素可以进行绝对定位。

图片样式

css 复制代码

.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 倍大小。

css 复制代码

.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 选择器分别设置不同的初始位置和悬停效果。

特殊图片样式

css 复制代码

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

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

css 复制代码

.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 动画效果，可以查阅相关的文档和教程。