前端练习小项目——方向感应名片
秋刀鱼不做梦 2024-07-14 12:33:01 阅读 87
前言：在学习完HTML和CSS之后，我们就可以开始做一些小项目了，本篇文章所讲的小项目为——方向感应名片
✨✨✨这里是秋刀鱼不做梦的BLOG
✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客
在开始学习之前，先让我们看一下最终效果：
那么我们如何去实现这样的小案例呢？在下文中我们对每一段重要的代码都进行了解释，读者可以根据注释对代码进行理解。
1.HTML代码
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta http-equiv="X-UA-Compatible" content="IE=edge">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>fish</title> <!-- 设置页面标题为fish -->
<link rel="stylesheet" href="./test.css"> <!-- 引入外部CSS样式表 -->code>
</head>
<body>
<div class="shell"> <!-- 外层容器 -->code>
<div class="box"> <!-- 盒子容器 -->code>
<div class="images"> <!-- 图片容器 -->code>
<img src="./item1.jpg"> <!-- 显示item1.jpg图片 -->code>
</div>
<div class="content"> <!-- 内容容器 -->code>
<h2>ZeenChin</h2> <!-- 标题为ZeenChin -->
<p>The style in the painting integrates temptation, fantasy and strangeness
</p> <!-- 段落内容描述绘画风格 -->
</div>
</div>
<!-- 后续box结构与前面类似，每个box包含图片和内容 -->
<div class="box">code>
<div class="images">code>
<img src="./item2.jpg">code>
</div>
<div class="content">code>
<h2>ZeenChin</h2>
<p>The style in the painting integrates temptation, fantasy and strangeness
</p>
</div>
</div>
<div class="box">code>
<div class="images">code>
<img src="./item3.jpg">code>
</div>
<div class="content">code>
<h2>ZeenChin</h2>
<p>The style in the painting integrates temptation, fantasy and strangeness
</p>
</div>
</div>
<div class="box">code>
<div class="images">code>
<img src="./item4.jpg">code>
</div>
<div class="content">code>
<h2>ZeenChin</h2>
<p>The style in the painting integrates temptation, fantasy and strangeness
</p>
</div>
</div>
<div class="box">code>
<div class="images">code>
<img src="./item5.jpg">code>
</div>
<div class="content">code>
<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">code>包裹，其中包含多个盒子<div class="box">code>，每个盒子内部有图片容器<div class="images">code>和内容容器<div class="content">code>，展示了不同的图片（如item1.jpg至item5.jpg）
——这里读者可以先对HTML中的代码进行简单的编写，这里直接展示HTML代码的结果了：
这样我们就大致的将网页的骨架搭建完成了，接下来在让我们编写CSS代码来进行对其的美化。
2.CSS代码
<code>* {
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像素 */
}
注：上边的代码中我们将每一行代码的讲解都附在了代码的上边，希望读者可以跟随着代码中的注释来理解每行代码的用意。
这里我们在简单的进行解释一下：
* { margin: 0; padding: 0; }: 将所有元素的内外边距重置为0，以确保整体布局的一致性。
body: 设置了页面主体的样式，利用Flex布局将内容区域水平和垂直居中，并设置了背景渐变色作为背景图像。
.shell: 这是一个容器，采用Flex布局，用于包裹一组具有动态效果的盒子（.box）。设置了透视效果（perspective）和3D变换（transform-style: preserve-3d），使得内容具有立体感。
.shell .box: 每个.box代表一个盒子，固定了宽度和高度，带有圆角和边框。通过旋转（transform: rotateY()）和过渡效果（transition），实现了鼠标悬停时的动画效果。
.shell:hover .box和.shell .box:hover: 当鼠标悬停在.shell或.box上时，通过旋转和缩放动画（transform属性）以及阴影效果（box-shadow），增强了用户交互体验。
.shell .box .content: 盒子内部的内容区域，利用绝对定位（position: absolute）来定位在盒子的顶部，设置了透明的背景颜色和过渡效果。
.shell .box:hover .content h2和.shell .box:hover .content p: 当鼠标悬停在.box上时，标题和段落文本通过transform属性实现了位置的变化，从而产生动态效果。
——最终我们将代码运行尽可以得到最终结果啦！（如图）
以上就是本篇文章的全部内容了~~~
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。