前端训练小项目——视觉打击卡片

锦通  金牌会员 | 2024-7-11 06:06:13 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 893|帖子 893|积分 2679

        媒介： 媒介：在学习完HTML和CSS之后，我们就可以开始做一些小项目了，本篇文章所讲的小项目为——视觉打击卡片
   

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


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

1.HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <!-- 设置文档使用的字符编码为UTF-8 -->
  6.     <meta charset="UTF-8">
  7.     <!-- 响应式设计，页面宽度等于设备宽度，初始缩放为1.0 -->
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <!-- 网页标题 -->
  10.     <title>zjy</title>
  11.     <!-- 引入样式表视觉冲击卡片.css -->
  12.     <link rel="stylesheet" href="./视觉冲击卡片.css">
  13. </head>
  15. <body>
  17.     <!-- 网页内容部分 -->
  18.     <div class="shell">
  19.         <!-- 第一个卡片 -->
  20.         <div class="card">
  21.             <!-- 卡片内部包裹层 -->
  22.             <div class="wrapper">
  23.                 <!-- 卡片封面图片 -->
  24.                 <img src="./image/01.png" alt="" class="cover-image">
  25.             </div>
  26.             <!-- 卡片标题文本 -->
  27.             <img src="./image/text-1.png" alt="" class="title">
  28.             <!-- 卡片角色图片 -->
  29.             <img src="./image/02.png" alt="" class="character">
  30.         </div>
  32.         <!-- 第二个卡片 -->
  33.         <div class="card">
  34.             <!-- 卡片内部包裹层 -->
  35.             <div class="wrapper">
  36.                 <!-- 卡片封面图片 -->
  37.                 <img src="./image/03.png" alt="" class="cover-image">
  38.             </div>
  39.             <!-- 卡片标题文本 -->
  40.             <img src="./image/text-2.png" alt="" class="title">
  41.             <!-- 卡片角色图片 -->
  42.             <img src="./image/04.png" alt="" class="character">
  43.         </div>
  44.     </div>
  46. </body>
  48. </html>
复制代码
        这段HTML代码是一个基本的网页模板，展示了两个卡片（card），每个卡片包含一个封面图片（cover-image）、一个标题文本（title）、以及一个脚色图片（character）。解释部门解释了每个标签的作用和功能。

2.CSS代码

  1. /* 通用样式重置 */
  2. * {
  3.     padding: 0;
  4.     margin: 0;
  5.     box-sizing: border-box;
  6. }
  8. /* 设置整个页面的样式 */
  9. body {
  10.     width: 100vw; /* 页面宽度等于视口宽度 */
  11.     height: 100vh; /* 页面高度等于视口高度 */
  12.     display: flex; /* 使用flex布局 */
  13.     justify-content: center; /* 水平居中 */
  14.     align-items: center; /* 垂直居中 */
  15.     background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); /* 设置背景为线性渐变色 */
  16. }
  18. /* 外层容器样式 */
  19. .shell {
  20.     display: flex; /* 使用flex布局 */
  21.     justify-content: center; /* 水平居中 */
  22.     align-items: center; /* 垂直居中 */
  23. }
  25. /* 卡片样式 */
  26. .card {
  27.     width: 270px; /* 卡片宽度 */
  28.     height: 545px; /* 卡片高度 */
  29.     position: relative; /* 相对定位，用于内部绝对定位元素的参考 */
  30.     display: flex; /* 使用flex布局 */
  31.     justify-content: center; /* 水平居中 */
  32.     align-items: center; /* 垂直居中 */
  33.     padding: 0 25px; /* 内边距 */
  34.     perspective: 2500px; /* 设置透视效果的观察距离 */
  35.     transition: all 0.5s; /* 所有属性变化过渡效果时长为0.5秒 */
  36.     margin: 0 100px; /* 外边距，控制卡片之间的间距 */
  37. }
  39. /* 卡片内部包裹层样式 */
  40. .wrapper {
  41.     transition: all 0.7s; /* 所有属性变化过渡效果时长为0.7秒 */
  42.     position: absolute; /* 绝对定位，相对于父级卡片 */
  43.     width: 100%; /* 宽度占满父级卡片 */
  44.     z-index: -1; /* 层级设置为低于卡片，用于显示卡片上的其他内容 */
  45. }
  47. /* 卡片封面图片样式 */
  48. .cover-image {
  49.     width: 100%; /* 图片宽度占满父级容器 */
  50.     /* 可选：如果取消注释，可能导致图片拉伸变形 */
  51.     /* height: 100%; */
  52. }
  54. /* 卡片标题文本样式 */
  55. .title {
  56.     width: 100%; /* 标题文本宽度占满父级容器 */
  57.     transition: transform 0.7s; /* transform属性变化过渡效果时长为0.7秒 */
  58. }
  60. /* 卡片角色图片样式 */
  61. .character {
  62.     width: 100%; /* 图片宽度占满父级容器 */
  63.     opacity: 0; /* 初始设置为透明 */
  64.     transition: all 0.7s; /* 所有属性变化过渡效果时长为0.7秒 */
  65.     position: absolute; /* 绝对定位，相对于父级卡片 */
  66.     z-index: -1; /* 层级设置为低于卡片，用于显示卡片上的其他内容 */
  67. }
  69. /* 鼠标悬停时，内部包裹层的效果 */
  70. .card:hover .wrapper {
  71.     transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); /* 应用透视效果和旋转效果 */
  72.     box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); /* 添加阴影效果 */
  73. }
  75. /* 卡片内部包裹层的伪元素样式 */
  76. .wrapper::before,
  77. .wrapper::after {
  78.     content: ""; /* 添加伪元素内容 */
  79.     opacity: 0; /* 初始设置为透明 */
  80.     width: 100%; /* 宽度占满包裹层 */
  81.     height: 80px; /* 高度设置为80px */
  82.     transition: all 0.7s; /* 所有属性变化过渡效果时长为0.7秒 */
  83.     position: absolute; /* 绝对定位，相对于父级包裹层 */
  84.     left: 0; /* 定位到左边界 */
  85. }
  87. /* 包裹层的上方伪元素样式 */
  88. .wrapper::before {
  89.     top: 0; /* 定位到上边界 */
  90.     height: 100%; /* 高度占满包裹层 */
  91.     /* 使用线性渐变背景色 */
  92.     background-image: linear-gradient(to top,
  93.             transparent 46%,
  94.             rgba(12, 13, 19, 0.5) 68%,
  95.             rgba(12, 13, 19) 97%);
  96. }
  98. /* 包裹层的下方伪元素样式 */
  99. .wrapper::after {
  100.     bottom: 0; /* 定位到下边界 */
  101.     opacity: 1; /* 设置为不透明 */
  102.     /* 使用线性渐变背景色 */
  103.     background-image: linear-gradient(to bottom,
  104.             transparent 46%,
  105.             rgba(12, 13, 19, 0.5) 68%,
  106.             rgba(12, 13, 19) 97%);
  107. }
  109. /* 鼠标悬停时，伪元素的效果 */
  110. .card:hover .wrapper::before,
  111. .wrapper::after {
  112.     opacity: 1; /* 设置为不透明 */
  113. }
  115. /* 鼠标悬停时，下方伪元素的高度增加 */
  116. .card:hover .wrapper::after {
  117.     height: 120px; /* 高度增加到120px */
  118. }
  120. /* 鼠标悬停时，标题文本的位移效果 */
  121. .card:hover .title {
  122.     transform: translate3d(0%, -50px, 100px); /* 应用位移和透视效果 */
  123. }
  125. /* 鼠标悬停时，角色图片的显示和位移效果 */
  126. .card:hover .character {
  127.     opacity: 1; /* 设置为不透明 */
  128.     transform: translate3d(0%, -20%, 100px); /* 应用位移和透视效果 */
  129. }
  131. /* 鼠标悬停时，整个卡片的位移效果 */
  132. .card:hover {
  133.     transform: translateY(40px); /* 卡片垂直位移 */
  134. }
复制代码
这段CSS代码实现了以下功能和效果：


  • 通用样式重置 (* {...}): 清除了所有元素的表里边距，以及盒模型的设置，确保样式表现一致性。
  • 页面样式 (body {...}): 设置了整个页面居中显示，并使用了线性渐变背景色作为背景。
  • 外层容器样式 (shell {...}): 通过flex布局，使得包裹卡片的外层容器在页面中水平和垂直居中显示。
  • 卡片样式 (card {...}): 定义了卡片的基本样式，包罗尺寸、位置、内边距、透视效果和过渡动画效果。每个卡片具有固定的宽度和高度，并且当鼠标悬停在卡片上时，会产生动态的变革效果。
  • 卡片内部包裹层样式 (wrapper {...}): 内部包裹层接纳绝对定位，使得卡片的内容（封面图片、标题、脚色图片）可以在动画效果中自由变换位置和形态。
  • 鼠标悬停效果 (card:hover {...}): 当鼠标悬停在卡片上时，通过CSS选择器 .card:hover，触发内部元素（封面、标题、脚色图片）的动态效果。例如，内部包裹层会应用透视变换和旋转效果，标题会有位移效果，脚色图片会显示和位移等。
  • 卡片内部包裹层的伪元素样式 (wrapper::before, wrapper::after {...}): 为卡片内部的包裹层添加了两个伪元素，用于创建上下渐变遮罩效果。这些伪元素在鼠标悬停时，透明度变革和高度变革，产生渐变效果的动画。
这样我们的案例就讲解完毕了！

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


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

本帖子中包含更多资源

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

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

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

本版积分规则

锦通

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

楼主热帖

标签云

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