欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 维修 > 前端小项目-强调鼠标悬停时效果的名片

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

2025/10/11 3:40:58 来源:https://blog.csdn.net/qq_33877849/article/details/140545908  浏览:    关键词:前端小项目-强调鼠标悬停时效果的名片

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

前言: 在学习完HTML和CSS之后,我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目,你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。


在开始学习之前,先让我们看一下最终效果:

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

那么我们如何去实现这样的小案例呢?在下文中我们对每一段重要的代码都进行了解释,读者可以根据注释对代码进行理解。

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;
}

注:上边的代码中我们将每一行代码的讲解都附在了代码的上边,希望读者可以跟随着代码中的注释来理解每行代码的用意。

这里我们在简单的进行解释一下:

  1. * { margin: 0; padding: 0; box-sizing: border-box; }: 将所有元素的内外边距重置为0,并设置box-sizingborder-box,使得元素的宽度和高度包含边框和内边距。
  2. body: 设置了页面主体的样式,利用Flex布局将内容区域水平和垂直居中,并设置了背景颜色。
  3. .container: 这是一个容器,设置了透视效果,使得卡片的3D变换更加立体。
  4. .card: 卡片的样式,设置了宽度、高度、背景颜色、边框圆角和阴影效果。通过旋转(transform: rotateY())和过渡效果(transition),实现了鼠标悬停时的动画效果。
  5. .card:hover: 当鼠标悬停在卡片上时,通过旋转动画(transform 属性),增强了用户交互体验。
  6. .image img: 图片容器的样式,设置了图片的宽度和高度,使其适应容器。
  7. .content: 内容区域的样式,设置了内边距和文本的字体大小和颜色。

最终我们将代码运行尽可以得到最终结果啦!(如图)

最终效果
在这里插入图片描述在这里插入图片描述
结语: 通过本文,你不仅学会了如何构建一个动态效果名片,还加深了对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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词