前端小项目-夸大鼠标悬停时效果的名片

兜兜零元  金牌会员 | 2024-7-21 03:39:48 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 810|帖子 810|积分 2430

前端练习小项目——动态效果名片

前言： 在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会怎样利用HTML和CSS来创建一个具有动态效果的名片。
在开始学习之前，先让我们看一下最终效果：


那么我们怎样去实现这样的小案例呢？在下文中我们对每一段紧张的代码都进行了解释，读者可以根据注释对代码进行明白。
1. HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Dynamic Business Card</title>
  8.     <link rel="stylesheet" href="./style.css">
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <div class="card">
  13.             <div class="image">
  14.                 <img src="https://ts3.cn.mm.bing.net/th?id=ORMS.62b4df73a6260d99ef9aa62173e99333&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.5&p=0" alt="Profile Picture">
  15.             </div>
  16.             <div class="content">
  17.                 <h2>John Doe</h2>
  18.                 <p>Front-end Developer</p>
  19.             </div>
  20.         </div>
  21.     </div>
  22. </body>
  23. </html>
复制代码
看完上述的代码之后，我相信读者已经有了大致的内容明白了，现在让我们简单的回顾一下上述的代码：


  • <head> 部分包含网页标题“Dynamic Business Card”和引入外部CSS样式表 style.css。
  • 主体部分由一个外层容器 <div class="container"> 包裹，此中包含一个卡片 <div class="card">。卡片内部有图片容器 <div class="image"> 和内容容器 <div class="content">，展示了差别的图片和文本。
这样我们就大致的将网页的骨架搭建完成了，接下来让我们编写CSS代码来进行对其的美化。
2. CSS代码

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. body {
  8.     display: flex;
  9.     justify-content: center;
  10.     align-items: center;
  11.     min-height: 100vh;
  12.     background-color: #f0f0f0;
  13. }
  15. .container {
  16.     perspective: 1000px;
  17. }
  19. .card {
  20.     width: 300px;
  21.     height: 400px;
  22.     background-color: #fff;
  23.     border-radius: 8px;
  24.     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  25.     overflow: hidden;
  26.     transition: transform 0.5s ease;
  27.     transform-style: preserve-3d;
  28. }
  30. .card:hover {
  31.     transform: rotateY(20deg);
  32. }
  34. .image img {
  35.     width: 100%;
  36.     height: 200px;
  37.     object-fit: cover;
  38. }
  40. .content {
  41.     padding: 20px;
  42. }
  44. .content h2 {
  45.     font-size: 24px;
  46.     color: #333;
  47. }
  49. .content p {
  50.     font-size: 16px;
  51.     color: #666;
  52.     margin-top: 10px;
  53. }
复制代码
注：上边的代码中我们将每一行代码的解说都附在了代码的上边，希望读者可以跟随着代码中的注释来明白每行代码的用意。
这里我们在简单的进行解释一下：


  • * { margin: 0; padding: 0; box-sizing: border-box; }: 将全部元素的表里边距重置为0，并设置box-sizing为border-box，使得元素的宽度和高度包含边框和内边距。
  • body: 设置了页面主体的样式，利用Flex结构将内容区域水平和垂直居中，并设置了配景颜色。
  • .container: 这是一个容器，设置了透视效果，使得卡片的3D变换更加立体。
  • .card: 卡片的样式，设置了宽度、高度、配景颜色、边框圆角和阴影效果。通过旋转（transform: rotateY()）和过渡效果（transition），实现了鼠标悬停时的动画效果。
  • .card:hover: 当鼠标悬停在卡片上时，通过旋转动画（transform 属性），增强了用户交互体验。
  • .image img: 图片容器的样式，设置了图片的宽度和高度，使其适应容器。
  • .content: 内容区域的样式，设置了内边距和文本的字体大小和颜色。
最终我们将代码运行尽可以得到最终结果啦！（如图）
最终效果

结语： 通过本文，你不仅学会了怎样构建一个动态效果名片，还加深了对HTML和CSS的明白。希望这个小项目能引发你继续探索前端开发的热情。
点睛之笔：

在CSS中，perspective 属性用于为3D空间中的元素设置视图距离。这个属性界说了观察者与Z=0平面之间的距离。也就是说，它控制了3D变换元素的透视效果，使得远离观察者的元素看起来更小。
属性值解释



  • perspective: 1000px;：这里的1000px表示透视点（即观察者眼睛的位置）距离Z=0平面的距离为1000像素。这个值越大，透视效果越显着，元素在Z轴方向上远离观察者时缩小得越快。
视觉效果



  • 当perspective值较大时，元素在进行3D变换（如旋转）时，远离观察者的一侧会显得更小，从而产生深度感。
  • 假如perspective值较小，透视效果不显着，元素在进行3D变换时，大小变化不大，看起来比较平面。
利用场景



  • 3D变换：在需要实现3D效果的元素上，通常会设置perspective属性，以增强视觉效果。
  • 增强用户体验：通过适当的透视效果，可以使界面更加生动和风趣。
示例

假设有一个卡片元素，我们希望在鼠标悬停时，卡片能够产生一种立体的翻转效果。这时，我们可以在外层容器上设置perspective属性，并在卡片元素上应用旋变化换：
  1. .container {
  2.     perspective: 1000px;
  3. }
  5. .card {
  6.     transition: transform 0.5s ease;
  7.     transform-style: preserve-3d;
  8. }
  10. .card:hover {
  11.     transform: rotateY(20deg);
  12. }
复制代码
在这个示例中：


  • .container 设置了perspective属性，界说了透视点。
  • .card 在鼠标悬停时会应用rotateY(20deg)旋变化换，由于外层容器的perspective属性，卡片的旋转效果会产生透视效果，使得远离观察者的一侧看起来更小。
通过这种方式，可以创建出更加丰富和吸引人的交互效果。
完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Dynamic Business Card</title>
  8.     <link rel="stylesheet" href="./style.css">
  9. <style>
  11. * {
  12.     margin: 0;
  13.     padding: 0;
  14.     box-sizing: border-box;
  15. }
  17. body {
  18.     display: flex;
  19.     justify-content: center;
  20.     align-items: center;
  21.     min-height: 100vh;
  22.     background-color: #f0f0f0;
  23. }
  25. .container {
  26.     perspective: 1000px;
  27.         margin:10px;
  28. }
  30. .card {
  31.     width: 300px;
  32.     height: 400px;
  33.     background-color: #fff;
  34.     border-radius: 8px;
  35.     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  36.     overflow: hidden;
  37.     transition: transform 0.5s ease;
  38.     transform-style: preserve-3d;
  39. }
  41. .card:hover {
  42.     transform: rotateY(20deg);
  43. }
  45. .image img {
  46.     width: 100%;
  47.     height: 200px;
  48.     object-fit: cover;
  49. }
  51. .content {
  52.     padding: 20px;
  55. }
  57. .content h2 {
  58.     font-size: 24px;
  59.     color: #333;
  60. }
  62. .content p {
  63.     font-size: 16px;
  64.     color: #666;
  65.     margin-top: 10px;
  66. }</style>
  67. </head>
  68. <body>
  69.     <div class="container">
  70.         <div class="card">
  71.             <div class="image">
  72.                 <img src="https://ts3.cn.mm.bing.net/th?id=ORMS.62b4df73a6260d99ef9aa62173e99333&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.5&p=0" alt="Profile Picture">
  73.             </div>
  74.             <div class="content">
  75.                 <h2>John Doe</h2>
  76.                 <p>Front-end Developer</p>
  77.             </div>
  78.         </div>
  79.     </div>
  81.     <div class="container">
  82.         <div class="card">
  83.             <div class="image">
  84.                 <img src="https://ts3.cn.mm.bing.net/th?id=ORMS.62b4df73a6260d99ef9aa62173e99333&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.5&p=0" alt="Profile Picture">
  85.             </div>
  86.             <div class="content">
  87.                 <h2>John Doe</h2>
  88.                 <p>Front-end Developer</p>
  89.             </div>
  90.         </div>
  91.     </div>
  95.     <div class="container">
  96.         <div class="card">
  97.             <div class="image">
  98.                 <img src="https://ts3.cn.mm.bing.net/th?id=ORMS.62b4df73a6260d99ef9aa62173e99333&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.5&p=0" alt="Profile Picture">
  99.             </div>
  100.             <div class="content">
  101.                 <h2>John Doe</h2>
  102.                 <p>Front-end Developer</p>
  103.             </div>
  104.         </div>
  105.     </div>
  106. </body>
  107. </html>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

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

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

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

本版积分规则

兜兜零元

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

楼主热帖

标签云

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