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

北冰洋以北  金牌会员 | 2024-7-16 04:25:32 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 905|帖子 905|积分 2715

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

  ✨✨✨这里是秋刀鱼不做梦的BLOG
  ✨✨✨想要相识更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客
  在开始学习之前，先让我们看一下最终效果：

        那么我们怎样去实现这样的小案例呢？在下文中我们对每一段告急的代码都举行相识释，读者可以根据注释对代码举行明白。

1.HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>fish</title> <!-- 设置页面标题为fish -->
  9.     <link rel="stylesheet" href="./test.css"> <!-- 引入外部CSS样式表 -->
  10. </head>
  12. <body>
  13.     <div class="shell"> <!-- 外层容器 -->
  14.         <div class="box"> <!-- 盒子容器 -->
  15.             <div class="images"> <!-- 图片容器 -->
  16.                 <img src="./item1.jpg"> <!-- 显示item1.jpg图片 -->
  17.             </div>
  18.             <div class="content"> <!-- 内容容器 -->
  19.                 <h2>ZeenChin</h2> <!-- 标题为ZeenChin -->
  20.                 <p>The style in the painting integrates temptation, fantasy and strangeness
  21.                 </p> <!-- 段落内容描述绘画风格 -->
  22.             </div>
  23.         </div>
  24.         <!-- 后续box结构与前面类似，每个box包含图片和内容 -->
  25.         <div class="box">
  26.             <div class="images">
  27.                 <img src="./item2.jpg">
  28.             </div>
  29.             <div class="content">
  30.                 <h2>ZeenChin</h2>
  31.                 <p>The style in the painting integrates temptation, fantasy and strangeness
  32.                 </p>
  33.             </div>
  34.         </div>
  35.         <div class="box">
  36.             <div class="images">
  37.                 <img src="./item3.jpg">
  38.             </div>
  39.             <div class="content">
  40.                 <h2>ZeenChin</h2>
  41.                 <p>The style in the painting integrates temptation, fantasy and strangeness
  42.                 </p>
  43.             </div>
  44.         </div>
  45.         <div class="box">
  46.             <div class="images">
  47.                 <img src="./item4.jpg">
  48.             </div>
  49.             <div class="content">
  50.                 <h2>ZeenChin</h2>
  51.                 <p>The style in the painting integrates temptation, fantasy and strangeness
  52.                 </p>
  53.             </div>
  54.         </div>
  55.         <div class="box">
  56.             <div class="images">
  57.                 <img src="./item5.jpg">
  58.             </div>
  59.             <div class="content">
  60.                 <h2>ZeenChin</h2>
  61.                 <p>The style in the painting integrates temptation, fantasy and strangeness
  62.                 </p>
  63.             </div>
  64.         </div>
  65.     </div>
  67. </body>
  69. </html>
复制代码
        看完上述的代码之后，我相信读者已经有了大致的内容明白了，现在在让我们简单的回顾一下上述的代码：
      其中<head>部门包罗网页标题“fish”和引入外部CSS样式表test.css。主体部门由一个外层容器<div class="shell">包裹，其中包罗多个盒子<div class="box">，每个盒子内部有图片容器<div class="images">和内容容器<div class="content">，展示了不同的图片（如item1.jpg至item5.jpg）
          ——这里读者可以先对HTML中的代码举行简单的编写，这里直接展示HTML代码的效果了：

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

2.CSS代码

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. body {
  7.     /* 将内容区域居中显示 */
  8.     display: flex;
  9.     /* 使用 Flex 布局 */
  10.     justify-content: center;
  11.     /* 水平居中 */
  12.     align-items: center;
  13.     /* 垂直居中 */
  14.     min-height: 100vh;
  15.     /* 最小高度占据整个视口 */
  16.     /* 设置背景渐变色 */
  17.     background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  18. }
  20. .shell {
  21.     /* 设置相对定位，启用3D变换 */
  22.     position: relative;
  23.     min-width: 1000px;
  24.     /* 最小宽度为1000像素 */
  25.     display: flex;
  26.     /* 使用 Flex 布局 */
  27.     justify-content: center;
  28.     /* 水平居中 */
  29.     flex-wrap: wrap;
  30.     /* 换行排列子元素 */
  31.     transform-style: preserve-3d;
  32.     /* 保持3D变换 */
  33.     perspective: 900px;
  34.     /* 设置透视效果 */
  35. }
  37. .shell .box {
  38.     /* 设置相对定位和固定宽高 */
  39.     position: relative;
  40.     width: 250px;
  41.     /* 宽度250像素 */
  42.     height: 350px;
  43.     /* 高度350像素 */
  44.     transition: 0.6s;
  45.     /* 过渡效果时长 */
  46.     overflow: hidden;
  47.     /* 隐藏溢出部分 */
  48.     margin: 30px;
  49.     /* 外边距为30像素 */
  50.     transform: rotateY(0deg);
  51.     /* 默认Y轴旋转角度为0度 */
  52.     transition-delay: .1s;
  53.     /* 过渡延迟0.1秒 */
  54.     border-radius: 5px;
  55.     /* 设置圆角为5像素 */
  56.     border: #fff 5px solid;
  57.     /* 边框为白色5像素实线 */
  58. }
  60. /* 鼠标悬停在 .shell 上时 */
  61. .shell:hover .box {
  62.     transform: rotateY(20deg);
  63.     /* 所有 .box 元素绕Y轴旋转20度 */
  64. }
  66. /* 鼠标悬停在 .box 上时 */
  67. .shell .box:hover {
  68.     transform: rotateY(0deg) scale(1.25);
  69.     /* 当前 .box 元素恢复到0度旋转并放大到1.25倍 */
  70.     box-shadow: 0 25px 40px rgba(0, 0, 0, 0.7);
  71.     /* 添加阴影效果 */
  72.     z-index: 1;
  73.     /* 设置堆叠顺序为1，使其位于最顶层 */
  74. }
  76. /* 鼠标悬停在 .box 上时，其他 .box 元素的效果 */
  77. .shell .box:hover~.box {
  78.     transform: rotateY(-20deg);
  79.     /* 其他 .box 元素绕Y轴反向旋转20度 */
  80. }
  82. .shell .box .images img {
  83.     width: 100%;
  84.     /* 图片宽度100% */
  85. }
  87. .shell .box .content {
  88.     position: absolute;
  89.     /* 绝对定位 */
  90.     top: 0;
  91.     /* 顶部与父元素对齐 */
  92.     width: 90%;
  93.     /* 宽度90% */
  94.     height: 100%;
  95.     /* 高度100% */
  96.     z-index: 999;
  97.     /* 设置堆叠顺序为999，使内容层位于最顶层 */
  98.     padding: 15px;
  99.     /* 内边距为15像素 */
  100. }
  102. .shell .box .content h2 {
  103.     color: rgb(210, 140, 140);
  104.     /* 设置标题颜色 */
  105.     transition: 0.6s;
  106.     /* 过渡效果时长 */
  107.     font-size: 20px;
  108.     /* 字体大小20像素 */
  109.     transform: translateY(-100px);
  110.     /* 初始位置向上偏移100像素 */
  111. }
  113. /* 鼠标悬停在 .box 上时的标题效果 */
  114. .shell .box:hover .content h2 {
  115.     transform: translateY(-15px);
  116.     /* 标题向上偏移15像素 */
  117. }
  119. .shell .box .content p {
  120.     color: rgb(0, 0, 0);
  121.     /* 设置段落文本颜色 */
  122.     transition: 0.6s;
  123.     /* 过渡效果时长 */
  124.     font-size: 14px;
  125.     /* 字体大小14像素 */
  126.     transform: translateY(600px);
  127.     /* 初始位置向下偏移600像素 */
  128.     background-color: rgba(255, 255, 255, 0.7);
  129.     /* 设置背景颜色及透明度 */
  130. }
  132. /* 鼠标悬停在 .box 上时的段落效果 */
  133. .shell .box:hover .content p {
  134.     transform: translateY(220px);
  135.     /* 段落向下偏移220像素 */
  136. }
复制代码
        注：上边的代码中我们将每一行代码的解说都附在了代码的上边，希望读者可以跟随着代码中的注释来明白每行代码的用意。
这里我们在简单的举行解释一下：

   

  • * { 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属性实现了位置的变化，从而产生动态效果。
          ——最终我们将代码运行尽可以得到最终效果啦！（如图）


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


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

北冰洋以北

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表