当前位置: 首页 > news >正文

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

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

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

前言

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

  1. HTML 结构:介绍页面的基本结构。

  2. CSS 样式:详细解析每个 CSS 规则的作用。

  3. 动态效果:解释如何通过 CSS 实现图片的动态效果。

  4. 总结:回顾整个过程并提供进一步学习的建议。

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

动态效果

通过 transformtransition 属性,我们可以轻松地为图片添加动态效果。transform 属性用于改变元素的形状、大小或位置,而 transition 属性用于定义过渡效果的时间和方式。

例如,当鼠标悬停在 .bigbox 上时,第一张图片会缩小到 0.7 倍大小,其他图片会移动到新的位置。这些效果通过 transformtransition 属性实现,使得页面更加生动有趣。

总结

本文通过一个具体的例子,展示了如何使用 CSS 实现图片展示与交互效果。通过合理的 HTML 结构和详细的 CSS 样式,我们可以为页面添加丰富的动态效果,提升用户体验。希望本文对您有所帮助,如果您想进一步学习 CSS 动画效果,可以查阅相关的文档和教程。

相关文章:

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

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Css篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Css篇专栏内容:CSS 动画效果实现&#xff1a;图片展示与交互 前言 在现代网页设计中&#xff0c;动态效果能够显著…...

【机器学习】—Transformers的扩展应用:从NLP到多领域突破

好久不见&#xff01;喜欢就关注吧~ 云边有个稻草人-CSDN博客 目录 引言 一、Transformer架构解析 &#xff08;一&#xff09;、核心组件 &#xff08;二&#xff09;、架构图 二、领域扩展&#xff1a;从NLP到更多场景 1. 自然语言处理&#xff08;NLP&#xff09; 2…...

Linux权限机制深度解读:系统安全的第一道防线

文章目录 前言‼️一、Linux权限的概念‼️二、Linux权限管理❕2.1 文件访问者的分类&#xff08;人&#xff09;❕2.2 文件类型和访问权限&#xff08;事物属性&#xff09;✔️1. 文件类型✔️2. 基本权限✔️3. 权限值的表示方法 ❕2.3 文件访问权限的相关设置方法✔️1. ch…...

NineData云原生智能数据管理平台新功能发布|2024年11月版

本月发布 8 项更新&#xff0c;其中重点发布 2 项、功能优化 6 项。 重点发布 数据库 Devops - 数据生成支持多个数据源 NineData 支持在数据库中自动生成符合特定业务场景的随机数据&#xff0c;用于模拟实际生产环境中的数据情况&#xff0c;帮助用户在不使用真实数据的情况…...

Vue中控制组件的挂载位置

在 Vue 中&#xff0c;append-to-body“true” 主要用于一些第三方组件&#xff08;如 Element UI 或 Ant Design Vue 中的弹出框、下拉菜单等&#xff09;来控制组件的挂载位置。具体来说&#xff0c;当你设置 append-to-body“true” 时&#xff0c;它会将该组件的 DOM 元素插…...

查看docker容器日志

容器里面的服务运行报错了&#xff0c;要查看容器的日志 要查看 Docker 容器的日志&#xff0c;可以使用 docker logs 命令。以下是一些常见的使用方法&#xff1a; 基本用法 docker logs <container_name_or_id> 查看最近的日志 docker logs --tail 100 <contai…...

Apache Commons工具类库使用整理

文章目录 Apache Commons工具类库分类- commons-lang3字符串工具&#xff1a;StringUtils日期工具&#xff1a;DateUtils数值工具&#xff1a;NumberUtils对象工具&#xff1a;ObjectUtils数组工具&#xff1a;ArrayUtils异常工具&#xff1a;ExceptionUtils枚举工具&#xff1…...

力扣第89题 格雷编码

题目描述 格雷编码序列是一个二进制数字序列&#xff0c;其中的每两个相邻的数字只有一个二进制位不同。给定一个整数 n&#xff0c;表示格雷编码的位数&#xff0c;要求返回 n 位的格雷编码序列。 示例 1 输入&#xff1a; n 2输出&#xff1a; [0, 1, 3, 2]解释&#x…...

Linux C/C++编程中的多线程编程基本概念

【图书推荐】《Linux C与C一线开发实践&#xff08;第2版&#xff09;》_linux c与c一线开发实践pdf-CSDN博客《Linux C与C一线开发实践&#xff08;第2版&#xff09;&#xff08;Linux技术丛书&#xff09;》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com…...

解决Tomcat运行时错误:“Address localhost:1099 is already in use”

目录 背景: 过程&#xff1a; 报错的原因&#xff1a; 解决的方法&#xff1a; 总结&#xff1a; 直接结束Java.exe进程&#xff1a; 使用neststat -aon | findstr 1099 命令&#xff1a; 选择建议&#xff1a; 背景: 准备运行Tomcat服务器调试项目时&#xff0c;程序下…...

C/C++中的调用约定

在C/C编程中&#xff0c;调用约定(calling conventions)是一组指定如何调用函数的规则。主要在你调用代码之外的函数(例如OS API&#xff0c;操作系统应用程序接口)或OS调用你(如WinMain的情况)时起作用。如果编译器不知道正确的调用约定&#xff0c;那么你很可能会遇到非常奇怪…...

微信创建小程序码 - 数量不受限制

获取小程序码&#xff1a;小程序码为圆图&#xff0c;且不受数量限制。 目录 文档 接口地址 请求方式 功能描述 注意事项 获取 scene 值 请求参数 返回参数 对接 请求方法 获取小程序码 调用获取小程序码 总结 文档 接口地址 https://api.weixin.qq.com/wxa/get…...

springboot/ssm美食分享系统Java代码web项目美食烹饪笔记分享交流

springboot/ssm美食分享系统ava美食烹饪笔记分享交流系统web美食源码 基于springboot(可改ssm)vue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#…...

【Redis篇】 List 列表

在 Redis 中&#xff0c;List 是一种非常常见的数据类型&#xff0c;用于表示一个有序的字符串集合。与传统的链表结构类似&#xff0c;Redis 的 List 支持在两端进行高效的插入和删除操作&#xff0c;因此非常适合实现队列&#xff08;Queue&#xff09;和栈&#xff08;Stack…...

多级IIR滤波效果(BIQUAD),system verilog验证

MATLAB生成IIR系数 采用率1k&#xff0c;截止频率30hz&#xff0c;Matlab生成6阶对应的biquad3级系数 Verilog测试代码 // fs1khz,fc30hz initial beginreal Sig_Orig, Noise_white, Mix_sig;real fs 1000;Int T 1; //周期int N T*fs; //1s的采样点数// 数组声明…...

【WPF中ControlTemplate 与 DataTemplate之间的区别?】

前言 WPF中ControlTemplate 与 DataTemplate之间的区别&#xff1f; 1. 定义&#xff1a; ControlTemplate 是用于定义 WPF 控件的外观和结构的模板。它允许您重新定义控件的视觉表现&#xff0c;而不改变控件的行为。 DataTemplate 是用于定义如何呈现数据对象的模板。它通…...

Keil5配色方案修改为类似VSCode配色

1. 为什么修改Keil5配色方案 视觉习惯&#xff1a;如果你已经习惯了VSCode的配色方案&#xff0c;尤其是在使用ESP-IDF开发ESP32时&#xff0c;Keil5的默认配色可能会让你感到不习惯。减少视觉疲劳&#xff1a;Keil5的默认背景可能过于明亮&#xff0c;长时间使用可能会导致视…...

ndp协议简介

在IPv6中&#xff0c;ARP&#xff08;地址解析协议&#xff09;被替代为邻居发现协议&#xff08;Neighbor Discovery Protocol&#xff0c;NDP&#xff09;。NDP是IPv6网络中用于发现邻居节点&#xff08;相邻设备&#xff09;的协议&#xff0c;类似于IPv4中的ARP。但与ARP不…...

stable diffusion实践操作-大模型介绍:SD的发展历史,SD1.5和SDXL之间的差别

大家有没有这样的困惑&#xff1a;在找模型时&#xff0c;老是会出现一些奇怪的标签&#xff0c;像 sd1.5、sdxl 之类的模型后缀&#xff0c;真让人摸不着头脑&#xff0c;一会儿 1.0&#xff0c;一会儿 1.5&#xff0c;一会儿 XL&#xff0c;完全搞不清楚状况。今天就来给大家…...

系统无法运行提示:sqlsut.dll初始化错误怎么解决?多种解决方法汇总一览

遇到 sqlsut.dll 初始化错误&#xff0c;这通常意味着 SQL Server 的某些组件未能正确加载或初始化。以下是一些可能的解决方法汇总&#xff0c;旨在帮助您排查和解决问题&#xff1a; 解决方法 1. 检查SQL Server服务状态•确认所有相关的SQL Server服务&#xff08;如SQL Se…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...