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

兜兜零元 发表于 2024-7-21 03:39:48

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

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

前言：在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会怎样利用HTML和CSS来创建一个具有动态效果的名片。
在开始学习之前，先让我们看一下最终效果：
https://i-blog.csdnimg.cn/direct/3048487004e940b58c0d9bbbeb98e5a3.pnghttps://i-blog.csdnimg.cn/direct/d22011de1903452c8e0541206af04f36.png
https://i-blog.csdnimg.cn/direct/eff107977c1747a29f8bee6a529b249c.png
那么我们怎样去实现这样的小案例呢？在下文中我们对每一段紧张的代码都进行了解释，读者可以根据注释对代码进行明白。
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>Dynamic Business Card</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
   <div class="card">
         <div class="image">
            <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">
         </div>
         <div class="content">
            <h2>John Doe</h2>
            <p>Front-end Developer</p>
         </div>
   </div>
</div>
</body>
</html>
看完上述的代码之后，我相信读者已经有了大致的内容明白了，现在让我们简单的回顾一下上述的代码：

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}

.container {
perspective: 1000px;
}

.card {
width: 300px;
height: 400px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.5s ease;
transform-style: preserve-3d;
}

.card:hover {
transform: rotateY(20deg);
}

.image img {
width: 100%;
height: 200px;
object-fit: cover;
}

.content {
padding: 20px;
}

.content h2 {
font-size: 24px;
color: #333;
}

.content p {
font-size: 16px;
color: #666;
margin-top: 10px;
}
注：上边的代码中我们将每一行代码的解说都附在了代码的上边，希望读者可以跟随着代码中的注释来明白每行代码的用意。
这里我们在简单的进行解释一下：

[*]* { 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: 内容区域的样式，设置了内边距和文本的字体大小和颜色。
最终我们将代码运行尽可以得到最终结果啦！（如图）
最终效果
https://i-blog.csdnimg.cn/direct/ed894c0081bf47298f80e0d998c49418.pnghttps://i-blog.csdnimg.cn/direct/90fe65e455ca4d3c829cd4f9d0e7d3b9.png
结语：通过本文，你不仅学会了怎样构建一个动态效果名片，还加深了对HTML和CSS的明白。希望这个小项目能引发你继续探索前端开发的热情。
点睛之笔：

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

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

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

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

假设有一个卡片元素，我们希望在鼠标悬停时，卡片能够产生一种立体的翻转效果。这时，我们可以在外层容器上设置perspective属性，并在卡片元素上应用旋变化换：
.container {
perspective: 1000px;
}

.card {
transition: transform 0.5s ease;
transform-style: preserve-3d;
}

.card:hover {
transform: rotateY(20deg);
}
在这个示例中：

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

<!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>Dynamic Business Card</title>
<link rel="stylesheet" href="./style.css">
<style>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}

.container {
perspective: 1000px;
margin:10px;
}

.card {
width: 300px;
height: 400px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.5s ease;
transform-style: preserve-3d;
}

.card:hover {
transform: rotateY(20deg);
}

.image img {
width: 100%;
height: 200px;
object-fit: cover;
}

.content {
padding: 20px;

}

.content h2 {
font-size: 24px;
color: #333;
}

.content p {
font-size: 16px;
color: #666;
margin-top: 10px;
}</style>
</head>
<body>
<div class="container">
   <div class="card">
         <div class="image">
            <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">
         </div>
         <div class="content">
            <h2>John Doe</h2>
            <p>Front-end Developer</p>
         </div>
   </div>
</div>

<div class="container">
   <div class="card">
         <div class="image">
            <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">
         </div>
         <div class="content">
            <h2>John Doe</h2>
            <p>Front-end Developer</p>
         </div>
   </div>
</div>

<div class="container">
   <div class="card">
         <div class="image">
            <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">
         </div>
         <div class="content">
            <h2>John Doe</h2>
            <p>Front-end Developer</p>
         </div>
   </div>
</div>
</body>
</html>

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

页: [1]

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

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