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

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

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

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

在这里插入图片描述

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

1. HTML代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Dynamic Business Card</title><linkrel="stylesheet"href="./style.css"></head><body><divclass="container"><divclass="card"><divclass="image"><imgsrc="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><divclass="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: 内容区域的样式，设置了内边距和文本的字体大小和颜色。

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

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

标签：前端 css3 html

本文转载自: https://blog.csdn.net/qq_33877849/article/details/140545908
版权归原作者 酷码编程接单空间 所有，如有侵权，请联系我们删除。

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

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

1. HTML代码

2. CSS代码

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

点睛之笔：

属性值解释

视觉效果

使用场景

示例

完整代码

发表评论

“前端小项目-强调鼠标悬停时效果的名片”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航