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

news2024/10/5 4:58:21

        前言：相信读者在学习完了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, { // 动画到盒子 A
            rotationY: 0.05 * sxPos, rotationX: 0.20 * syPos,
            rotationZ: '-0.1', transformPerspective: 500,
        });
        TweenMax.to($heroB, 1, { // 动画到盒子 B
            rotationY: 0.10 * sxPos,
            rotationX: 0.15 * syPos, rotationZ: 0, transformPerspective: 500,
        });
        TweenMax.to($heroC, 1, { // 动画到盒子 C
            rotationY: 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>

效果图：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2189282.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【隐私计算篇】多方安全计算之函数秘密共享(FSS)

【隐私计算篇】多方安全计算之函数秘密共享(FSS)

1. 函数秘密共享(FSS)定义 秘密共享是一种将一个值拆分为多个份额的方法&#xff0c;形式有多种&#xff0c;可以参考《安全多方计算(MPC)矩阵乘法算子的原理分析》。这里主要提及加法秘密共享&#xff0c;使得&#xff1a;这些份额可以重新组合以还原出秘密值&#xff1b;任…
阅读更多...
HTMLCSS练习

HTMLCSS练习

1) 效果如下 2) 代码如下 2.1) HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" conte…
阅读更多...
IPS和IDS有啥区别

IPS和IDS有啥区别

在网络安全领域&#xff0c;入侵检测系统 (IDS) 和入侵防御系统 (IPS) 是两种关键的技术&#xff0c;旨在保护网络免受各种威胁。这两者尽管名字相似&#xff0c;但在功能、配置、以及应用场景等方面都有着显著的差异。 入侵检测系统 (IDS) IDS 是一种被动监控系统&#xff0c…
阅读更多...
自建动态IP代理为何无法使用及解决方法

自建动态IP代理为何无法使用及解决方法

在网络使用中&#xff0c;有时候我们自建动态IP代理来实现一些特定的需求&#xff0c;例如访问受限内容或保护隐私。然而&#xff0c;有时我们会遇到无法使用的情况。本文将探讨无法使用的可能原因&#xff0c;并提供相应的解决方法。 1. 可能原因 a. 网络配置问题 自建动态I…
阅读更多...
Chromium 关闭 Google Chrome 后继续运行后台应用功能分析c++

Chromium 关闭 Google Chrome 后继续运行后台应用功能分析c++

此功能允许关闭 Google Chrome 后继续运行后台&#xff0c;控制此功能的开关是 // Set to true if background mode is enabled on this browser. //更改此值可以修改默认开启关闭 inline constexpr char kBackgroundModeEnabled[] "background_mode.enabled"; …
阅读更多...
Python爬虫（五）--爬虫库的使用（Python Crawler (5) - Use of Crawler Libraries）

Python爬虫（五）--爬虫库的使用（Python Crawler (5) - Use of Crawler Libraries）

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…
阅读更多...
如何解决在 nextjs 中使用 sequelize 连接 mysql 报错：Please install mysql2 package manually

如何解决在 nextjs 中使用 sequelize 连接 mysql 报错：Please install mysql2 package manually

解决方案 手动设置 dialectModule 的值为 mysql2。增加 dialectModule 配置即可。 import mysql2 from mysql2 import { Sequelize } from sequelizeconst { DB_DATABASE, DB_USER, DB_PASSWORD, DB_HOST, DB_PORT, DB_LOGGING, DB_POLL_MAX, DB_POLL_MIN, DB_POLL_ACQUIRE, …
阅读更多...
Android Framework（八）WMS-窗口动效概述

Android Framework（八）WMS-窗口动效概述

文章目录 动画简述本地、远端动画的定义什么是“leash”图层“leash”图层的命令与创建 Winscope流程小结 动画流程概览分析Activity启动app_transition 动画的主要事件触发动画执行的套路动画真正执行动画的结束回调触发远端动画的Target 动画简述 1、动画的原理也是利用了视觉…
阅读更多...
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验

vue3 + Ant design vue formItem 无法使用嵌套的form表单校验

文章目录 前言一、背景在这里插入代码片二、操作步骤1.复现前的准备工作&#xff08;1&#xff09;vue版本和ant design vue 版本&#xff08;2&#xff09;任意页面的代码 2.解决问题3.自定义表单校验的代码 总结 前言 提示&#xff1a; 一、背景在这里插入代码片 背景&…
阅读更多...
音视频入门基础：FLV专题（13）——FFmpeg源码中，解析任意Type值的SCRIPTDATAVALUE类型的实现

音视频入门基础：FLV专题（13）——FFmpeg源码中，解析任意Type值的SCRIPTDATAVALUE类型的实现

一、SCRIPTDATAVALUE类型 从《音视频入门基础&#xff1a;FLV专题&#xff08;9&#xff09;——Script Tag简介》中可以知道&#xff0c;根据《video_file_format_spec_v10_1.pdf》第80到81页&#xff0c;SCRIPTDATAVALUE类型由一个8位&#xff08;1字节&#xff09;的Type和…
阅读更多...
go语言protoc的详细用法与例子

go语言protoc的详细用法与例子

一. 原来的项目结构 二. 选择源proto文件及其目录&目的proto文件及其目录 在E:\code\go_test\simple_demo\api 文件夹下&#xff0c;递归创建\snapshot\helloworld\v1\ad.pb.go E:\code\go_test\simple_demo> protoc --go_outpathssource_relative:./api .\snapshot\h…
阅读更多...
数据结构--二叉树的顺序实现（堆实现）

数据结构--二叉树的顺序实现（堆实现）

引言 在计算机科学中&#xff0c;二叉树是一种重要的数据结构&#xff0c;广泛应用于各种算法和程序设计中。本文将探讨二叉树的顺序实现&#xff0c;特别是堆的实现方式。 一、树 1.1树的概念与结构 树是⼀种⾮线性的数据结构&#xff0c;它是由 n(n>0) 个有限结点组成…
阅读更多...
新款平行进口奔驰GLS450升级原厂AR实景导航人机交互行车记录仪等功能

新款平行进口奔驰GLS450升级原厂AR实景导航人机交互行车记录仪等功能

平行进口的24款奔驰GLS450升级原厂中规导航主机通常具备以下功能&#xff1a; 人机交互系统&#xff1a;该导航主机配备了人机交互系统&#xff0c;可以通过触摸屏、旋钮或语音控制等方式与导航系统进行交互&#xff0c;方便驾驶者进行导航设置和操作。 实景AR导航&#xff1…
阅读更多...
使用 classification_report 评估 scikit-learn 中的分类模型

使用 classification_report 评估 scikit-learn 中的分类模型

介绍 在机器学习领域&#xff0c;评估分类模型的性能至关重要。scikit-learn 是一个功能强大的 Python 机器学习工具&#xff0c;提供了多种模型评估工具。其中最有用的函数之一是 classification_report&#xff0c;它可以全面概述分类模型的关键指标。在这篇文章中&#xff…
阅读更多...
字符串和字符数组（1）

字符串和字符数组（1）

1.字符串和\0 C语言中有字符类型&#xff0c;但没有字符串类型&#xff0c;C语言中字符串就是由双引号引起来的一串字符&#xff0c;比如&#xff1a;"asdf"&#xff1b; 一个字符串中我们能直观的看到一些字符&#xff0c;比如&#xff1a;字符串常量"asdfgh…
阅读更多...
三、Java AI 编程助手

三、Java AI 编程助手

AI 对于我们来说是一个高效的编程助手&#xff0c;给我们提供了有效的建议和解决方案&#xff0c;高效利用&#xff0c;无疑是如虎添翼。接下来为大家推荐一个 AI 编程助手。 Fitten Code 1、简介 Fitten Code 免费且支持 80 多种语言&#xff1a;Python、C、Javascript、Type…
阅读更多...
2024.9.29 问卷数据分析

2024.9.29 问卷数据分析

最近拿到了一份受众回访的问卷数据&#xff0c;排到的任务是对它进行数据探索。 其实对于问卷数据的处理我只在参加正大杯那次做过&#xff08;正大杯拿了校三&#xff09;&#xff0c;可见这个处理水平还有待提高&#xff08;当然是各种原因促成的结果&#xff09;&#xff0…
阅读更多...
python配置环境变量

python配置环境变量

方法一&#xff1a;首先卸载重新安装&#xff0c;在安装时勾选增加环境变量 方法二&#xff1a;我的电脑-属性-高级系统配置 手动添加环境变量&#xff0c;路径为python的安装路径 检查&#xff1a;查看环境变量是否安装成功 安装第三方lib winr&#xff0c;输入cmd pip ins…
阅读更多...
[SAP ABAP] 数据元素添加参数ID(Parameter ID)

[SAP ABAP] 数据元素添加参数ID(Parameter ID)

学生表(ZDBT_STU_437) 示例&#xff1a;为学生表ZDBT_STU_437中的数据元素ZDE_STUID_437创建Parameter ID 1.使用事务码SM30维护TPARA表 新建参数ID并输入简短描述 点击保存按钮&#xff0c;选择指定的包即可生成参数ID 2.参数ID和数据元素绑定 使用SE11对学生表(ZDBT_STU_…
阅读更多...
小程序 uniapp+Android+hbuilderx体育场地预约管理系统的设计与实现

小程序 uniapp+Android+hbuilderx体育场地预约管理系统的设计与实现

目录 项目介绍支持以下技术栈&#xff1a;具体实现截图HBuilderXuniappmysql数据库与主流编程语言java类核心代码部分展示登录的业务流程的顺序是&#xff1a;数据库设计性能分析操作可行性技术可行性系统安全性数据完整性软件测试详细视频演示源码获取方式 项目介绍 用户 注册…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023