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

avatar
作者
猴君
阅读量:1

        前言:在学习完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属性实现了位置的变化,从而产生动态效果。

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


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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!