我们可以使用 CSS3 中的 transform 属性和 transition 属性来制作飞翔的团队介绍卡片效果。下面是一个简单的实现方法：
- HTML 结构
首先，我们需要一个包含团队成员信息的 HTML 结构。
<div class="team-card">
<img src="member.jpg" alt="Member Name">
<h3>Member Name</h3>
<p>Job Title</p>
<p>Introduction</p>
</div>- CSS 样式
接下来，我们为卡片添加 CSS 样式。
.team-card {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 30px;
background-color: #fff;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.team-card img {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.5s ease;
}
.team-card:hover img {
transform: translateY(-50%);
}
.team-card h3 {
margin: 20px 0 10px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.team-card p {
margin: 10px 0;
font-size: 16px;
text-align: center;
}
.team-card p.highlight {
color: #ff9900;
font-weight: bold;
}
.team-card pre {
font-size: 14px;
background-color: #f5f5f5;
padding: 10px;
overflow-x: auto;
}- 解释
.team-card类表示卡片容器，设置了宽度、高度、边距、背景颜色和阴影效果。.team-card img类表示卡片中的图片，设置了宽度、高度、对象适应和过渡效果。.team-card:hover img类表示鼠标悬停时图片的变化，使用 translateY 转换将图片向上移动。.team-card h3类表示卡片中的小标题，设置了边距、字体大小、字体加粗和文字对齐方式。.team-card p类表示卡片中的段落，设置了边距、字体大小和文字对齐方式。.team-card p.highlight类表示卡片中需要高亮的关键词，设置了颜色和字体加粗。.team-card pre类表示卡片中的代码块，设置了字体大小、背景颜色、内边距和水平溢出自动。
- 效果展示
最终效果可以参考以下截图：
通过鼠标悬停，我们可以看到图片向上移动的效果。同时，小标题、段落和代码块也都有了不同的样式。
2023-05-09 13:24:52 更新
相关推荐
其他工具