前端练习小项目——方向感应名片

        前言:在学习完HTML和CSS之后,我们就可以开始做一些小项目了,本篇文章所讲的小项目为——方向感应名片


✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

在开始学习之前,先让我们看一下最终效果:

        那么我们如何去实现这样的小案例呢?在下文中我们对每一段重要的代码都进行了解释,读者可以根据注释对代码进行理解。

1.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>fish</title> <!-- 设置页面标题为fish --><link rel="stylesheet" href="./test.css"> <!-- 引入外部CSS样式表 -->
</head><body><div class="shell"> <!-- 外层容器 --><div class="box"> <!-- 盒子容器 --><div class="images"> <!-- 图片容器 --><img src="./item1.jpg"> <!-- 显示item1.jpg图片 --></div><div class="content"> <!-- 内容容器 --><h2>ZeenChin</h2> <!-- 标题为ZeenChin --><p>The style in the painting integrates temptation, fantasy and strangeness</p> <!-- 段落内容描述绘画风格 --></div></div><!-- 后续box结构与前面类似,每个box包含图片和内容 --><div class="box"><div class="images"><img src="./item2.jpg"></div><div class="content"><h2>ZeenChin</h2><p>The style in the painting integrates temptation, fantasy and strangeness</p></div></div><div class="box"><div class="images"><img src="./item3.jpg"></div><div class="content"><h2>ZeenChin</h2><p>The style in the painting integrates temptation, fantasy and strangeness</p></div></div><div class="box"><div class="images"><img src="./item4.jpg"></div><div class="content"><h2>ZeenChin</h2><p>The style in the painting integrates temptation, fantasy and strangeness</p></div></div><div class="box"><div class="images"><img src="./item5.jpg"></div><div class="content"><h2>ZeenChin</h2><p>The style in the painting integrates temptation, fantasy and strangeness</p></div></div></div></body></html>

        看完上述的代码之后,我相信读者已经有了大致的内容理解了,现在在让我们简单的回顾一下上述的代码:

   其中<head>部分包含网页标题“fish”和引入外部CSS样式表test.css。主体部分由一个外层容器<div class="shell">包裹,其中包含多个盒子<div class="box">,每个盒子内部有图片容器<div class="images">和内容容器<div class="content">,展示了不同的图片(如item1.jpgitem5.jpg

        ——这里读者可以先对HTML中的代码进行简单的编写,这里直接展示HTML代码的结果了:

这样我们就大致的将网页的骨架搭建完成了,接下来在让我们编写CSS代码来进行对其的美化。

2.CSS代码

* {margin: 0;padding: 0;
}body {/* 将内容区域居中显示 */display: flex;/* 使用 Flex 布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */min-height: 100vh;/* 最小高度占据整个视口 *//* 设置背景渐变色 */background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}.shell {/* 设置相对定位,启用3D变换 */position: relative;min-width: 1000px;/* 最小宽度为1000像素 */display: flex;/* 使用 Flex 布局 */justify-content: center;/* 水平居中 */flex-wrap: wrap;/* 换行排列子元素 */transform-style: preserve-3d;/* 保持3D变换 */perspective: 900px;/* 设置透视效果 */
}.shell .box {/* 设置相对定位和固定宽高 */position: relative;width: 250px;/* 宽度250像素 */height: 350px;/* 高度350像素 */transition: 0.6s;/* 过渡效果时长 */overflow: hidden;/* 隐藏溢出部分 */margin: 30px;/* 外边距为30像素 */transform: rotateY(0deg);/* 默认Y轴旋转角度为0度 */transition-delay: .1s;/* 过渡延迟0.1秒 */border-radius: 5px;/* 设置圆角为5像素 */border: #fff 5px solid;/* 边框为白色5像素实线 */
}/* 鼠标悬停在 .shell 上时 */
.shell:hover .box {transform: rotateY(20deg);/* 所有 .box 元素绕Y轴旋转20度 */
}/* 鼠标悬停在 .box 上时 */
.shell .box:hover {transform: rotateY(0deg) scale(1.25);/* 当前 .box 元素恢复到0度旋转并放大到1.25倍 */box-shadow: 0 25px 40px rgba(0, 0, 0, 0.7);/* 添加阴影效果 */z-index: 1;/* 设置堆叠顺序为1,使其位于最顶层 */
}/* 鼠标悬停在 .box 上时,其他 .box 元素的效果 */
.shell .box:hover~.box {transform: rotateY(-20deg);/* 其他 .box 元素绕Y轴反向旋转20度 */
}.shell .box .images img {width: 100%;/* 图片宽度100% */
}.shell .box .content {position: absolute;/* 绝对定位 */top: 0;/* 顶部与父元素对齐 */width: 90%;/* 宽度90% */height: 100%;/* 高度100% */z-index: 999;/* 设置堆叠顺序为999,使内容层位于最顶层 */padding: 15px;/* 内边距为15像素 */
}.shell .box .content h2 {color: rgb(210, 140, 140);/* 设置标题颜色 */transition: 0.6s;/* 过渡效果时长 */font-size: 20px;/* 字体大小20像素 */transform: translateY(-100px);/* 初始位置向上偏移100像素 */
}/* 鼠标悬停在 .box 上时的标题效果 */
.shell .box:hover .content h2 {transform: translateY(-15px);/* 标题向上偏移15像素 */
}.shell .box .content p {color: rgb(0, 0, 0);/* 设置段落文本颜色 */transition: 0.6s;/* 过渡效果时长 */font-size: 14px;/* 字体大小14像素 */transform: translateY(600px);/* 初始位置向下偏移600像素 */background-color: rgba(255, 255, 255, 0.7);/* 设置背景颜色及透明度 */
}/* 鼠标悬停在 .box 上时的段落效果 */
.shell .box:hover .content p {transform: translateY(220px);/* 段落向下偏移220像素 */
}

        注:上边的代码中我们将每一行代码的讲解都附在了代码的上边,希望读者可以跟随着代码中的注释来理解每行代码的用意。

这里我们在简单的进行解释一下:

  1. * { margin: 0; padding: 0; }: 将所有元素的内外边距重置为0,以确保整体布局的一致性。

  2. body: 设置了页面主体的样式,利用Flex布局将内容区域水平和垂直居中,并设置了背景渐变色作为背景图像。

  3. .shell: 这是一个容器,采用Flex布局,用于包裹一组具有动态效果的盒子(.box)。设置了透视效果(perspective)和3D变换(transform-style: preserve-3d),使得内容具有立体感。

  4. .shell .box: 每个.box代表一个盒子,固定了宽度和高度,带有圆角和边框。通过旋转(transform: rotateY())和过渡效果(transition),实现了鼠标悬停时的动画效果。

  5. .shell:hover .box.shell .box:hover: 当鼠标悬停在.shell.box上时,通过旋转和缩放动画(transform属性)以及阴影效果(box-shadow),增强了用户交互体验。

  6. .shell .box .content: 盒子内部的内容区域,利用绝对定位(position: absolute)来定位在盒子的顶部,设置了透明的背景颜色和过渡效果。

  7. .shell .box:hover .content h2.shell .box:hover .content p: 当鼠标悬停在.box上时,标题和段落文本通过transform属性实现了位置的变化,从而产生动态效果。

        ——最终我们将代码运行尽可以得到最终结果啦!(如图)


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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java中的代理机制

代理的概述 代理&#xff1a;给目标对象提供一个代理对象&#xff0c;并且由代理对象控制着对目标对象的引用&#xff08;跟多态一样&#xff09; mybatis、spring都运用了代理机制 跳过创建类的过程&#xff0c;直接产生对象 简单来说&#xff0c;我们使用代理对象来代替对…

【Python】日期和时间模块

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️Python】 文章目录 前言时间元组datetime 模块datetime类获取当前日期和时间 timedelta类日期和时间运算 strftime()方法格式化时间日期格式化符号 strptime()方法 Time 模块Time 模块内置函数Time 模…

编译适用于 Apple Silicon Macs 的 Chromium 教程

本教程将指导你如何在 Apple Silicon Macs 上编译 Chromium&#xff0c;包括所需的系统要求、工具安装、源码获取、环境配置、编译和运行步骤。 一、系统要求 Apple Silicon Mac&#xff08;如 M1、M2&#xff09;。安装 Xcode 和 macOS SDK&#xff08;通过 App Store 安装最…

AWDAWFAAFAWAWFAWF

创建两张表&#xff1a;部门&#xff08;dept&#xff09;和员工&#xff08;emp&#xff09; 创建视图v_emp_dept_id_1&#xff0c;查询销售部门的员工姓名和家庭住址 创建视图v_emp_dept&#xff0c;查询销售部门员工姓名和家庭住址及部门名称 创建视图v_dept_emp_count(dept…

Ubuntu使用Nginx部署uniapp打包的项目

使用uniapp导出web项目&#xff1a; 安装&#xff1a; sudo apt install nginx解压web.zip unzip web.zip移动到/var/www/html目录下&#xff1a; sudo cp -r ~/web/h5/ /var/www/html/重启Nginx&#xff1a; sudo service nginx restart浏览器访问&#xff1a;http://19…

Java高频面试基础知识点整理4

干货分享&#xff0c;感谢您的阅读&#xff01;背景​​​​​​高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09; 最全文章见&#xff1a;Java高频面试基础知识点整理 &#xff08;一&#xff09;Java基础高频知识考点 针对人员&#xff1a; 1.全部人员都…

算法学习笔记(8.4)-完全背包问题

目录 Question&#xff1a; 图例&#xff1a; 动态规划思路 2 代码实现&#xff1a; 3 空间优化&#xff1a; 代码实现&#xff1a; 下面是0-1背包和完全背包具体的例题&#xff1a; 代码实现&#xff1a; 图例&#xff1a; 空间优化代码示例 Question&#xff1a; 给定n个物品…

Tomcat组件概念和请求流程

Tomcat:是一个Servlet容器(实现了Container接口)&#xff0c;容器分层架构从上到下分为。Engine(List<Host>)->Host(List<Context>)->Context(List<Wrapper>)->Wrapper(List<Servlet>); Engine:引擎&#xff0c;Servlet 的顶层容器&#xff0…

UML建模案例分析-类图中的关系

概要 类图之间的关系比较多&#xff0c;绝大多数情况下重点关注的还是关联关系、组合、聚合这三种&#xff0c;最终是如何对应到代码上的。 例子 以订单为例&#xff1a;订单和订单项之间是组合关系&#xff0c;这和数据库实体之间不一样。数据库实体有主外键&#xff0c;开…

Java聚合跑腿系统对接云洋聚合跑腿系统源码低价快递小程序APP公众号源码

一站式解决方案 &#x1f680;引言&#xff1a;跑腿服务的市场需求与聚合趋势 在快节奏的现代生活中&#xff0c;跑腿服务成为了越来越多人的选择。为了满足这一市场需求&#xff0c;各大跑腿平台纷纷涌现。然而&#xff0c;如何将这些平台进行有效整合&#xff0c;提供更为便…

比特币交易繁忙的一天

早晨:市场开盘与准备工作 6:00 AM - 全球市场监测 交易员们早早起床,开始监测全球市场动态,尤其是亚洲市场的动向。通过查看新闻、分析报告和市场数据,了解可能影响比特币价格的因素。 7:00 AM - 团队会议 召开晨会,讨论当天的交易策略。团队分析前一天的交易情况,评…

HTML网页大设计-家乡天水

代码下载: https://pan.quark.cn/s/6bad4cfaefda

Windows下vscode配置C++环境

一、vscode下载及安装 vscode官网 选安装位置。 勾选这几项。 1.vscode界面中文配置 &#xff08;1&#xff09;点击扩展小图标&#xff0c;搜索插件&#xff0c;找到插件Chinese (Simplified) (简体中文) Language Pack&#xff0c;点击install。 &#xff08;2&#xf…

【vue组件库搭建07】Vitest单元测试

vitest官网 vue-test-utils 我们的测试框架选择的是 Vitest 和 vue-test-utils。两者的关系为&#xff1a; Vitest 提供测试方法&#xff1a;断言、Mock 、SpyOn 等方法。vue-test-utils: 挂载和渲染组件&#xff1a; Vue Test Utils 允许您在隔离中挂载组件&#xff0c;这意…

实用机器学习(快速入门)

前言 因为需要机器学习的助力&#xff0c;所以&#xff08;浅浅&#xff09;进修了一下。现在什么东西和AI结合一下感觉就好发文章了&#xff1b;我看了好多学习视频&#xff0c;发现机器学习实际上是数学&#xff0c;并不是常规的去学习代码什么的&#xff08;虽然代码也很简…

我应该使用 Pinia 还是 Vuex?

大家好,我是CodeQi! 一位热衷于技术分享的码仔。 当项目逐渐变大时,状态管理的问题开始显现了出来。这时,两个强大的状态管理工具:Vuex 和 Pinia。该选择哪一个呢? 今天带各位大佬对比下两者的优势在何处,以及如何选择合适的状态管理库! 什么是 Vuex? Vuex 是 Vue.j…

时间管理的6张清单:做个时间清单控,提高时间颗粒度!

时间管理管理的到底是什么&#xff1f;我觉得其根本就是时间的颗粒度。这与大多数行业精英的时间管理不谋而合&#xff0c;也就是身段越高&#xff0c;时间管理的颗粒度越高。比尔盖茨的颗粒度是5分钟&#xff0c;精确到与人握手&#xff0c;按秒来安排&#xff01;接下来&…

Amesim-帮助文件翻译与总结-tigger(滞环)

元件应用说明 滞环一般应用于控制策略制定&#xff0c;该原件类似于一个开关&#xff0c;当输入值大于设置的high input threshold Value时输出high out value&#xff1b;小于low input threshold value时输出low output value。若输出值在high input threshold Value与low i…

大模型应用中CoT(思维链)技术详细介绍

大模型应用中CoT&#xff08;思维链&#xff09;技术详细介绍 1. 背景 在自然语言处理&#xff08;NLP&#xff09;领域中&#xff0c;尤其是语言模型&#xff08;如GPT-3, BERT等&#xff09;的应用中&#xff0c;理解和推理复杂的文本信息变得越来越重要。Chain-of-Thought…

01. 课程简介

1. 课程简介 本课程的核心内容可以分为三个部分&#xff0c;分别是需要理解记忆的计算机底层基础&#xff0c;后端通用组件以及需要不断编码练习的数据结构和算法。 计算机底层基础可以包含计算机网络、操作系统、编译原理、计算机组成原理&#xff0c;后两者在面试中出现的频…