ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端小项目-夸大鼠标悬停时效果的名片 [打印本页]
作者: 兜兜零元    时间: 2024-7-21 03:39
标题: 前端小项目-夸大鼠标悬停时效果的名片
前端练习小项目——动态效果名片

前言： 在学习完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>
复制代码
看完上述的代码之后，我相信读者已经有了大致的内容明白了，现在让我们简单的回顾一下上述的代码：

这样我们就大致的将网页的骨架搭建完成了，接下来让我们编写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. }
复制代码
注：上边的代码中我们将每一行代码的解说都附在了代码的上边，希望读者可以跟随着代码中的注释来明白每行代码的用意。
这里我们在简单的进行解释一下：

最终我们将代码运行尽可以得到最终结果啦！（如图）
最终效果

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

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


视觉效果


利用场景


示例

假设有一个卡片元素，我们希望在鼠标悬停时，卡片能够产生一种立体的翻转效果。这时，我们可以在外层容器上设置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. }
复制代码
在这个示例中：

通过这种方式，可以创建出更加丰富和吸引人的交互效果。
完整代码

  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4