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

最新推荐文章于 2024-08-05 20:28:44 发布

酷码编程接单空间

最新推荐文章于 2024-08-05 20:28:44 发布

阅读量1.1k

点赞数 26

文章标签：前端 css3 html 学习

本文链接：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;
}

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

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

* { 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>