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

前端练习小项目 —— 让图片变得更 “色”

news 2026/2/8 17:43:23

        前言：相信读者在学习完了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>

在上述的代码中，我们可以看到：

  1. 外部容器：<div class="shell">，用于包裹内部的盒子。

  2. 盒子1：<div class="box" id="box-a">，包含一张图片。

  3. 盒子2：<div class="box" id="box-b">，同样包含一张图片。

  4. 盒子3：<div class="box" id="box-c">，也包含一张图片。

  5. 图片来源：每个盒子中的图片均指向本地文件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% */
}

解释：

  1. 全屏背景：使用径向渐变，从鲜红色到深蓝色，营造视觉层次感。

  2. 居中布局：body 使用弹性布局，使内容在水平和垂直方向上居中。

  3. 固定容器：.shell 设置固定的高度（260px）和宽度（500px）。

  4. 灰度效果：.box 应用 40% 的灰度滤镜，使内容呈现灰色调。

  5. 透明图片：.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>

这里我们再对上述代码进行解释一下，便于读者的理解：

  1. 获取 DOM 元素：

    • 使用 jQuery 获取 body 和每个盒子内的图片元素。

  2. 设置 3D 效果：

    • 使用 TweenMax 设置每个图片的 transformStyle 属性为 'preserve-3d'，以保留 3D 效果。

  3. 鼠标移动事件：

    • 为 body 添加鼠标移动事件，捕捉鼠标位置。

  4. 计算鼠标位置：

    • 根据鼠标在页面中的 X 和 Y 坐标计算出相应的偏移量。

  5. 动画效果：

    • 使用 TweenMax.to 方法对每个盒子的图片应用旋转动画，旋转量根据鼠标位置动态变化。

  6. 动画持续时间：

    • 每个动画持续 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>

效果图：

以上就是本篇文章的全部内容了！！！

相关文章：

前端练习小项目 —— 让图片变得更 “色”

前言&#xff1a;相信读者在学习完了HTML、CSS和JavaScript之后已经想要迫不及待的想找一个小型的项目来练练手&#xff0c;那么这篇文章就正好能满足你的 “需求”。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 在开始学习…...

编程日记 2024/10/8 13:46:09

时间卷积网络（TCN）原理+代码详解

目录 一、TCN原理1.1 因果卷积&#xff08;Causal Convolution&#xff09;1.2 扩张卷积&#xff08;Dilated Convolution&#xff09; 二、代码实现2.1 Chomp1d 模块2.2 TemporalBlock 模块2.3 TemporalConvNet 模块2.4 完整代码示例 参考文献 在理解 TCN 的原理之前&#xff…...

编程日记 2024/10/8 13:45:07

零散的知识

1.物化 在SQL中&#xff0c;物化&#xff08;Materialization&#xff09;是指将查询结果保存为物理数据结构以供后续使用的过程。这与普通的视图或查询不同&#xff0c;物化视图会存储查询的结果&#xff0c;而不是每次查询时都动态地重新计算数据。 ①物化视图 物化视图是一…...

编程日记 2024/10/8 13:43:04

Python读取pdf中的文字与表格

一、PyPDF2包安装 在Python中安装PyPDF2库&#xff0c;您可以使用pip包管理器。打开您的命令行工具&#xff08;例如CMD、Terminal或Anaconda Prompt&#xff09;&#xff0c;然后输入以下命令&#xff1a; pip install PyPDF2 如果您使用的是Python 3&#xff0c;并且系统中…...

编程日记 2024/10/8 13:42:02

【MySQL 08】复合查询

目录 1.准备工作 2.多表查询 笛卡尔积 多表查询案例 3. 自连接 4.子查询 1.单行子查询 2.多行子查询 3.多列子查询 4.在from子句中使用子查询 5.合并查询 1.union 2.union all 1.准备工作 如下三个表&#xff0c;将作为示例&#xff0c;理解复合查询 EMP员工表…...

编程日记 2024/10/8 13:41:00

求1000以内的完数

题目&#xff1a;一个数如果恰好等于他的因子之和&#xff08;包括1&#xff0c;但不包括这个数&#xff09;&#xff0c;这个数就是完数。编写算法找出1000之内的所有完数&#xff0c;并按下面格式输出其因子&#xff1a;28 its factors are 1,2,4,7,14 代码如下&#xff1a;…...

编程日记 2024/10/8 13:39:58

sqli-labs less-16 post提交dnslog注入

post提交DNSlog注入 第十六关和和十五关大差不大&#xff0c;可以使用布尔注入&#xff0c;时间盲注等&#xff0c;只不过闭合方式不一样&#xff0c;但是用布尔和时间盲太过于消耗时间&#xff0c;本次测试我将使用dnslog注入。 使用在线平台http://www.dnslog.cn/ 闭合方式…...

编程日记 2024/10/8 13:38:56

nginx报错|xquic|xqc_engine_create: fail|

一.问题描述 nginx使用xquic协议一切安装正常,nginx -s reload也正常&#xff0c;但就是访问不了网页 [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…...

编程日记 2024/10/8 13:37:51

Java虚拟机(JVM)

目录 内存区域划分堆&#xff08;Heap&#xff09;方法区&#xff08;Method Area&#xff09;程序计数器&#xff08;Program Counter Register&#xff09;虚拟机栈&#xff08;VM Stack&#xff09;本地方法栈&#xff08;Native Method Stack&#xff09; 类加载的过程类加…...

编程日记 2024/10/8 13:36:49

MQ 架构设计原理与消息中间件详解（三）

RabbitMQ实战解决方案 RabbitMQ死信队列 死信队列产生的背景 RabbitMQ死信队列俗称&#xff0c;备胎队列&#xff1b;消息中间件因为某种原因拒收该消息后&#xff0c;可以转移到死信队列中存放&#xff0c;死信队列也可以有交换机和路由key等。 产生死信队列的原因 消息投…...

编程日记 2024/10/8 13:35:48

大数据新视界 --大数据大厂之 Alluxio 数据缓存系统在大数据中的应用与配置

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

编程日记 2024/10/8 13:34:46

PHP基本语法总结

目录 输出语句 注释 数据类型&#xff08;变量&#xff09; 局部和全局作用域 类型比较&#xff08;松散比较与严格比较&#xff09; 常量 运算符 并置运算符 不等于 逻辑运算符 条件语句 数组 关联数组 数组排序 一般数组 关联数组 循环 函数 变量函数 魔…...

编程日记 2024/10/8 13:33:43

尚硅谷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…...

编程日记 2024/10/8 13:32:27

解锁空间距离计算的多种方式-含前端、空间数据库、后端

目录 前言 一、空间数据库求解 1、PostGIS实现 二、GIS前端组件求解 1、Leaflet.js距离测算 2、Turf.js前端计算 三、后台距离计算生成 1、欧式距离 2、Haversice球面距离 3、GeoTools距离计算 4、Gdal距离生成 5、geodesy距离计算 四、成果与生成对比 1、Java不…...

编程日记 2024/10/8 13:29:23

Windows 开发工具使用技巧 QT使用安装和使用技巧 QT快捷键

一、QT配置 1. 安装 Qt 开发框架 1、下载 1、进入下载地址 下载地址1 (官方, 需注册账号)&#xff1a; https://www.qt.io/download下载地址2&#xff08;推荐&#xff09;&#xff1a; http://download.qt.io/http://download.qt.io/archive/qt/ &#xff08;或更直接的…...

编程日记 2024/10/8 13:28:22

【实战教程】SpringBoot全面指南：快速上手到项目实战(SpringBoot)

文章目录 【实战教程】SpringBoot全面指南&#xff1a;快速上手到项目实战(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…...

编程日记 2024/10/8 13:24:16

LeetCode讲解篇之1043. 分隔数组以得到最大和

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 对于这题我们这么考虑&#xff0c;我们选择以数字的第i个元素做为分隔子数组的右边界&#xff0c;我们需要计算当前分隔子数组的长度为多少时能让数组[0, i]进行分隔数组的和最大 我们用数组f表示[0, i)区间内的…...

编程日记 2024/10/8 13:23:14

Python知识点：结合Python工具，如何使用TfidfVectorizer进行文本特征提取

开篇&#xff0c;先说一个好消息&#xff0c;截止到2025年1月1日前&#xff0c;翻到文末找到我&#xff0c;赠送定制版的开题报告和任务书&#xff0c;先到先得&#xff01;过期不候&#xff01; 如何使用Python的TfidfVectorizer进行文本特征提取 在自然语言处理&#xff08;…...

编程日记 2024/10/8 13:20:08

Diffusion models（扩散模型） 是怎么工作的

前言 给一个提示词, Midjourney, Stable Diffusion 和 DALL-E 可以生成很好看的图片&#xff0c;那么它们是怎么工作的呢&#xff1f;它们都用了 Diffusion models&#xff08;扩散模型&#xff09; 这项技术。 Diffusion models 正在成为生命科学等领域的一项尖端技术&…...

编程日记 2024/10/8 13:17:02

查找回收站里隐藏的文件

在Windows里&#xff0c;每个磁盘分区都有一个隐藏的回收站Recycle&#xff0c; 回收站里保存着用户删除的文件、图片、视频等数据&#xff0c;比如&#xff0c;C盘的回收站为C:\RECYCLE.BIN\&#xff0c;D盘的的回收站为D:\RECYCLE.BIN\&#xff0c;E盘的的回收站为E:\RECYCLE…...

编程日记 2024/10/8 13:15:00

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2026/2/4 22:38:49

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/30 20:05:06

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/1/26 9:30:45

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/9/18 20:16:52

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

编程新知 2025/6/10 21:26:51

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2026/2/1 20:47:10