CSS列表项悬停特效

原创已于 2025-06-27 13:58:15 修改 · 235 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-27 14:53:52 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS列表项悬停特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background-color: #f5f5f5;
padding: 50px;
}

.container {
max-width: 800px;
margin: 0 auto;
}

h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
}

.special-list {
list-style: none;
}

.special-list li {
background: white;
margin-bottom: 10px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.special-list li::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: all 0.5s ease;
}

.special-list li:hover {
transform: translateX(10px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.special-list li:hover::before {
left: 100%;
}

.special-list li:nth-child(1):hover {
background: #ffebee;
border-left: 5px solid #f44336;
}

.special-list li:nth-child(2):hover {
background: #e8f5e9;
border-left: 5px solid #4caf50;
}

.special-list li:nth-child(3):hover {
background: #e3f2fd;
border-left: 5px solid #2196f3;
}

.special-list li:nth-child(4):hover {
background: #fff3e0;
border-left: 5px solid #ff9800;
}

.special-list li a {
text-decoration: none;
color: #333;
font-size: 18px;
display: block;
}

.special-list li p {
color: #666;
margin-top: 10px;
font-size: 14px;
}

.footer {
text-align: center;
margin-top: 50px;
color: #999;
font-size: 14px;
}

.footer a {
color: #2196f3;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS列表项悬停特效</h1>

<ul class="special-list">
<li>
<a href="#">列表项1</a>
<p>鼠标悬停查看特效效果</p>
</li>
<li>
<a href="#">列表项2</a>
<p>每个列表项有不同的悬停颜色</p>
</li>
<li>
<a href="#">列表项3</a>
<p>平滑的过渡动画效果</p>
</li>
<li>
<a href="#">列表项4 - 点击访问示例网站</a>
<p>更多特效</p>
</li>
</ul>


</div>
</body>
</html>