CSS3悬停显示文字特效

ziblog

已于 2025-06-27 10:57:02 修改

阅读量729

点赞数 6

CC 4.0 BY-SA版权

文章标签： css css3 前端

于 2025-06-21 14:20:59 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148810119

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3悬停显示文字特效</title>
<style>
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* 主体样式 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
font-family: 'Microsoft YaHei', sans-serif;
}

/* 卡片容器 */
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1200px;
padding: 20px;
}

/* 单个卡片样式 */
.card {
position: relative;
width: 280px;
height: 350px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}

/* 卡片图片 */
.card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}

/* 卡片内容区域 */
.card-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
transform: translateY(100%);
transition: all 0.5s ease;
}

/* 卡片标题 */
.card-title {
font-size: 22px;
margin-bottom: 10px;
font-weight: bold;
}

/* 卡片描述 */
.card-description {
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
opacity: 0;
transition: all 0.3s ease 0.2s;
}

/* 卡片按钮 */
.card-button {
display: inline-block;
padding: 8px 20px;
background-color: #ff6b6b;
color: white;
text-decoration: none;
border-radius: 25px;
font-size: 14px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease 0.3s;
}

/* 悬停效果 */
.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.card:hover .card-image {
transform: scale(1.1);
}

.card:hover .card-content {
transform: translateY(0);
}

.card:hover .card-description {
opacity: 1;
}

.card:hover .card-button {
opacity: 1;
transform: translateY(0);
}

/* 网站链接样式 */
.website-link {
position: fixed;
bottom: 20px;
right: 20px;
color: #666;
font-size: 14px;
text-decoration: none;
z-index: 100;
}

/* 标题样式 */
.page-title {
position: absolute;
top: 50px;
left: 0;
width: 100%;
text-align: center;
font-size: 36px;
color: #333;
margin-bottom: 40px;
}

/* 卡片类型1 - 蓝色主题 */
.card-type1 .card-content {
background: linear-gradient(to top, rgba(41, 128, 185, 0.9), transparent);
}

.card-type1 .card-button {
background-color: #3498db;
}

/* 卡片类型2 - 紫色主题 */
.card-type2 .card-content {
background: linear-gradient(to top, rgba(142, 68, 173, 0.9), transparent);
}

.card-type2 .card-button {
background-color: #9b59b6;
}

/* 卡片类型3 - 绿色主题 */
.card-type3 .card-content {
background: linear-gradient(to top, rgba(39, 174, 96, 0.9), transparent);
}

.card-type3 .card-button {
background-color: #2ecc71;
}
</style>
</head>
<body>

<h1 class="page-title">悬停显示文字特效</h1>

<div class="card-container">

<div class="card card-type1">
<img src="https://picsum.photos/400/600?random=1" alt="图片1" class="card-image">
<div class="card-content">
<h3 class="card-title">创意设计</h3>
<p class="card-description">这里展示的是创意设计服务的介绍内容，当鼠标悬停在卡片上时，这段文字会以动画形式显示出来。</p>
<a href="#" class="card-button">了解更多</a>
</div>
</div>

<div class="card card-type2">
<img src="https://picsum.photos/400/600?random=2" alt="图片2" class="card-image">
<div class="card-content">
<h3 class="card-title">网页开发</h3>
<p class="card-description">这里展示的是网页开发服务的介绍内容，当鼠标悬停在卡片上时，这段文字会以动画形式显示出来。</p>
<a href="#" class="card-button">了解更多</a>
</div>
</div>

<div class="card card-type3">
<img src="https://picsum.photos/400/600?random=3" alt="图片3" class="card-image">
<div class="card-content">
<h3 class="card-title">移动应用</h3>
<p class="card-description">这里展示的是移动应用开发服务的介绍内容，当鼠标悬停在卡片上时，这段文字会以动画形式显示出来。</p>
<a href="#" class="card-button">了解更多</a>
</div>
</div>
</div>

</body>
</html>