前端练习小项目 —— 让图片变得更 “色”
前言：相信读者在学习完了HTML、CSS和JavaScript之后已经想要迫不及待的想找一个小型的项目来练练手，那么这篇文章就正好能满足你的 “需求”。
✨✨✨这里是秋刀鱼不做梦的BLOG
✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客
在开始学习之前，先让我们看一下最终的效果：
——看完了上述效果之后，现在让我们开始制作吧！
1.HTML代码
再开始进行效果制作之前，先让我们将HTML代码的骨架搭建好，以下为其HTML代码：
<body><div class="shell"> <!-- 外部容器，用于包裹内部的盒子 --><div class="box" id="box-a"> <!-- 第一个盒子，ID 为 box-a --><img src="./1.jpg" alt=""> <!-- 图片，src 指向本地的 1.jpg --></div><div class="box" id="box-b"> <!-- 第二个盒子，ID 为 box-b --><img src="./1.jpg" alt=""> <!-- 图片，src 指向本地的 1.jpg --></div><div class="box" id="box-c"> <!-- 第三个盒子，ID 为 box-c --><img src="./1.jpg" alt=""> <!-- 图片，src 指向本地的 1.jpg --></div></div>
</body>
在上述的代码中，我们可以看到：
外部容器：
<div class="shell">，用于包裹内部的盒子。盒子1：
<div class="box" id="box-a">，包含一张图片。盒子2：
<div class="box" id="box-b">，同样包含一张图片。盒子3：
<div class="box" id="box-c">，也包含一张图片。图片来源：每个盒子中的图片均指向本地文件
1.jpg。
这样，通过上述的解释之后，我们对其的HTML代码也就进一步加深了。
2.css代码
当我们编写完了HTML代码之后，我们就可以对其进行一些效果上的修饰了！以下为CSS代码：
body {background: radial-gradient(circle farthest-side at center bottom,crimson, #003087 130%); /* 背景为径向渐变，从鲜红色到深蓝色 */overflow: hidden; /* 隐藏超出边界的内容 */display: flex; /* 使用弹性布局 */justify-content: center; /* 水平居中对齐内容 */align-items: center; /* 垂直居中对齐内容 */height: 100vh; /* 高度为视口高度的 100% */
}.shell {height: 260px; /* 容器高度 */width: 500px; /* 容器宽度 */
}.box {filter: grayscale(40%); /* 应用 40% 的灰度滤镜 */
}.box img {position: absolute; /* 绝对定位 */opacity: 0.4; /* 图片透明度为 40% */margin: auto; /* 自动外边距 */width: 100%; /* 图片宽度为 100% */
}
解释：
-
全屏背景：使用径向渐变，从鲜红色到深蓝色，营造视觉层次感。
-
居中布局：
body使用弹性布局，使内容在水平和垂直方向上居中。 -
固定容器：
.shell设置固定的高度（260px）和宽度（500px）。 -
灰度效果：
.box应用 40% 的灰度滤镜，使内容呈现灰色调。 -
透明图片：
.box img的透明度设置为 40%，增加柔和视觉效果
通过上述的总理之后，这样我们就对CSS代码有了一定的理解了！
3.JavaScript代码
再编写完了HTML和CSS代码之后，再让我们对其交互的效果进行完善，以下为JavaScript代码：
导入文件：
<!-- 导入jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- 导入动画库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>交互的编写：
<script>/* 获取元素 */let $body = $("body"), // 获取 body 元素$heroA = $("#box-a img"), // 获取盒子 A 中的图片$heroB = $("#box-b img"), // 获取盒子 B 中的图片$heroC = $("#box-c img"); // 获取盒子 C 中的图片// 设置 transformStyle 属性为 'preserve-3d'，使3D效果得以保留TweenMax.set($heroA, { transformStyle: 'preserve-3d' });TweenMax.set($heroB, { transformStyle: 'preserve-3d' });TweenMax.set($heroC, { transformStyle: 'preserve-3d' });/* 鼠标移动事件 */$body.mousemove(function (e) {/* 计算鼠标在页面中的位置 */let sxPos = e.pageX / $body.width() * 300 - 50; // 计算鼠标的 X 轴位置let syPos = e.pageY / $body.height() * 300 - 50; // 计算鼠标的 Y 轴位置console.log("x:" + sxPos + ", y:" + syPos); // 输出鼠标位置/* 使用 TweenMax 库设置元素的动画效果 */TweenMax.to($heroA, 1, { // 动画到盒子 ArotationY: 0.05 * sxPos, rotationX: 0.20 * syPos,rotationZ: '-0.1', transformPerspective: 500,});TweenMax.to($heroB, 1, { // 动画到盒子 BrotationY: 0.10 * sxPos,rotationX: 0.15 * syPos, rotationZ: 0, transformPerspective: 500,});TweenMax.to($heroC, 1, { // 动画到盒子 CrotationY: 0.15 * sxPos,rotationX: 0.10 * syPos, rotationZ: 0.10, transformPerspective: 500,});});
</script>
这里我们再对上述代码进行解释一下，便于读者的理解：
获取 DOM 元素：
使用 jQuery 获取
body和每个盒子内的图片元素。设置 3D 效果：
使用
TweenMax设置每个图片的transformStyle属性为'preserve-3d'，以保留 3D 效果。鼠标移动事件：
为
body添加鼠标移动事件，捕捉鼠标位置。计算鼠标位置：
根据鼠标在页面中的 X 和 Y 坐标计算出相应的偏移量。
动画效果：
使用
TweenMax.to方法对每个盒子的图片应用旋转动画，旋转量根据鼠标位置动态变化。动画持续时间：
每个动画持续 1 秒，添加了透视效果。
希望读者可以根据上述的代码注释和下面的解释对JavaScript样式进行理解！
——至此，我们就完成了这个案例的编写了，最后我们附上全部代码以及最终的效果图：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>秋刀鱼不做梦</title><link rel="stylesheet" href="./index.css"><style>body {background: radial-gradient(circle farthest-side at center bottom,crimson, #003087 130%);overflow: hidden;display: flex;justify-content: center;align-items: center;height: 100vh;}.shell {height: 260px;width: 500px;}.box {filter: grayscale(40%);}.box img {position: absolute;opacity: 0.4;margin: auto;width: 100%;}</style>
</head><body><div class="shell"><div class="box" id="box-a"><img src="./1.jpg" alt=""></div><div class="box" id="box-b"><img src="./1.jpg" alt=""></div><div class="box" id="box-c"><img src="./1.jpg" alt=""></div></div>
</body><!-- 导入jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- 导入动画库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script><script>/* 获取元素*/let $body = $("body"),$heroA = $("#box-a img"),$heroB = $("#box-b img"),$heroC = $("#box-c img");// 设置 transformStyle 属性为 'preserve-3d'TweenMax.set($heroA, { transformStyle: 'preserve-3d' });TweenMax.set($heroB, { transformStyle: 'preserve-3d' });TweenMax.set($heroC, { transformStyle: 'preserve-3d' });/* 鼠标移动事件 */$body.mousemove(function (e) {/* 计算鼠标在页面中的位置 */let sxPos = e.pageX / $body.width() * 300 - 50;let syPos = e.pageY / $body.height() * 300 - 50;console.log("x:" + sxPos + ", y:" + syPos);/* 使用TweenMax库设置元素的动画效果 */TweenMax.to($heroA, 1, {rotationY: 0.05 * sxPos, rotationX: 0.20 * syPos,rotationZ: '-0.1', transformPerspective: 500,});TweenMax.to($heroB, 1, {rotationY: 0.10 * sxPos,rotationX: 0.15 * syPos, rotationZ: 0, transformPerspective: 500,});TweenMax.to($heroC, 1, {rotationY: 0.15 * sxPos,rotationX: 0.10 * syPos, rotationZ: 0.10, transformPerspective: 500,});});
</script></html>效果图：
以上就是本篇文章的全部内容了！！！
相关文章：
前端练习小项目 —— 让图片变得更 “色”
前言：相信读者在学习完了HTML、CSS和JavaScript之后已经想要迫不及待的想找一个小型的项目来练练手，那么这篇文章就正好能满足你的 “需求”。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 在开始学习…...
时间卷积网络（TCN）原理+代码详解
目录 一、TCN原理1.1 因果卷积（Causal Convolution）1.2 扩张卷积（Dilated Convolution） 二、代码实现2.1 Chomp1d 模块2.2 TemporalBlock 模块2.3 TemporalConvNet 模块2.4 完整代码示例 参考文献 在理解 TCN 的原理之前ÿ…...
零散的知识
1.物化 在SQL中，物化（Materialization）是指将查询结果保存为物理数据结构以供后续使用的过程。这与普通的视图或查询不同，物化视图会存储查询的结果，而不是每次查询时都动态地重新计算数据。 ①物化视图 物化视图是一…...
Python读取pdf中的文字与表格
一、PyPDF2包安装 在Python中安装PyPDF2库，您可以使用pip包管理器。打开您的命令行工具（例如CMD、Terminal或Anaconda Prompt），然后输入以下命令： pip install PyPDF2 如果您使用的是Python 3，并且系统中…...
【MySQL 08】复合查询
目录 1.准备工作 2.多表查询 笛卡尔积 多表查询案例 3. 自连接 4.子查询 1.单行子查询 2.多行子查询 3.多列子查询 4.在from子句中使用子查询 5.合并查询 1.union 2.union all 1.准备工作 如下三个表，将作为示例，理解复合查询 EMP员工表…...
求1000以内的完数
题目：一个数如果恰好等于他的因子之和（包括1，但不包括这个数），这个数就是完数。编写算法找出1000之内的所有完数，并按下面格式输出其因子：28 its factors are 1,2,4,7,14 代码如下：…...
sqli-labs less-16 post提交dnslog注入
post提交DNSlog注入 第十六关和和十五关大差不大，可以使用布尔注入，时间盲注等，只不过闭合方式不一样，但是用布尔和时间盲太过于消耗时间，本次测试我将使用dnslog注入。 使用在线平台http://www.dnslog.cn/ 闭合方式…...
nginx报错|xquic|xqc_engine_create: fail|
一.问题描述 nginx使用xquic协议一切安装正常,nginx -s reload也正常，但就是访问不了网页 [emerg] 12342#0: |xquic|xqc_engine_create: fail| [emerg] 12342#0: |xquic|ngx_xquic_process_init|engine_init fail| [emerg] 12341#0: |xquic|xqc_engine_create: fai…...
Java虚拟机(JVM)
目录 内存区域划分堆（Heap）方法区（Method Area）程序计数器（Program Counter Register）虚拟机栈（VM Stack）本地方法栈（Native Method Stack） 类加载的过程类加…...
MQ 架构设计原理与消息中间件详解（三）
RabbitMQ实战解决方案 RabbitMQ死信队列 死信队列产生的背景 RabbitMQ死信队列俗称，备胎队列；消息中间件因为某种原因拒收该消息后，可以转移到死信队列中存放，死信队列也可以有交换机和路由key等。 产生死信队列的原因 消息投…...
大数据新视界 --大数据大厂之 Alluxio 数据缓存系统在大数据中的应用与配置
💖💖💖亲爱的朋友们，热烈欢迎你们来到 青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...
PHP基本语法总结
目录 输出语句 注释 数据类型（变量） 局部和全局作用域 类型比较（松散比较与严格比较） 常量 运算符 并置运算符 不等于 逻辑运算符 条件语句 数组 关联数组 数组排序 一般数组 关联数组 循环 函数 变量函数 魔…...
尚硅谷rabbitmq 2024第30-33节 死信队列 答疑
Virtual host: Type: Name: Durabiity: Arguments: Default for virtual host w ququt.normal.video Durable x-dead-letter-exchange x-dead-1etter-routing-xey x-mAx-1ength X-m在88点0也-6E1 exchange.dead.letter.vide zouting.key.dead.ietter.v 10 String String Number…...
解锁空间距离计算的多种方式-含前端、空间数据库、后端
目录 前言 一、空间数据库求解 1、PostGIS实现 二、GIS前端组件求解 1、Leaflet.js距离测算 2、Turf.js前端计算 三、后台距离计算生成 1、欧式距离 2、Haversice球面距离 3、GeoTools距离计算 4、Gdal距离生成 5、geodesy距离计算 四、成果与生成对比 1、Java不…...
Windows 开发工具使用技巧 QT使用安装和使用技巧 QT快捷键
一、QT配置 1. 安装 Qt 开发框架 1、下载 1、进入下载地址 下载地址1 (官方, 需注册账号)： https://www.qt.io/download下载地址2（推荐）： http://download.qt.io/http://download.qt.io/archive/qt/ （或更直接的…...
【实战教程】SpringBoot全面指南：快速上手到项目实战(SpringBoot)
文章目录 【实战教程】SpringBoot全面指南：快速上手到项目实战(SpringBoot)1. SpringBoot介绍1.1 SpringBoot简介1.2系统要求1.3 SpringBoot和SpringMVC区别1.4 SpringBoot和SpringCloud区别 2.快速入门3. Web开发3.1 静态资源访问3.2 渲染Web页面3.3 YML与Properti…...
LeetCode讲解篇之1043. 分隔数组以得到最大和
文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 对于这题我们这么考虑，我们选择以数字的第i个元素做为分隔子数组的右边界，我们需要计算当前分隔子数组的长度为多少时能让数组[0, i]进行分隔数组的和最大 我们用数组f表示[0, i)区间内的…...
Python知识点：结合Python工具，如何使用TfidfVectorizer进行文本特征提取
开篇，先说一个好消息，截止到2025年1月1日前，翻到文末找到我，赠送定制版的开题报告和任务书，先到先得！过期不候！ 如何使用Python的TfidfVectorizer进行文本特征提取 在自然语言处理（…...
Diffusion models（扩散模型） 是怎么工作的
前言 给一个提示词, Midjourney, Stable Diffusion 和 DALL-E 可以生成很好看的图片，那么它们是怎么工作的呢？它们都用了 Diffusion models（扩散模型） 这项技术。 Diffusion models 正在成为生命科学等领域的一项尖端技术&…...
查找回收站里隐藏的文件
在Windows里，每个磁盘分区都有一个隐藏的回收站Recycle， 回收站里保存着用户删除的文件、图片、视频等数据，比如，C盘的回收站为C:\RECYCLE.BIN\，D盘的的回收站为D:\RECYCLE.BIN\，E盘的的回收站为E:\RECYCLE…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
HTML 列表、表格、表单
1 列表标签 作用：布局内容排列整齐的区域 列表分类：无序列表、有序列表、定义列表。 例如： 1.1 无序列表 标签：ul 嵌套 li，ul是无序列表，li是列表条目。 注意事项： ul 标签里面只能包裹 li…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心，直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法，涵盖基础规则、优化算法和容错机制： 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则： 大尺寸/重量积木在下…...