CSS 时间轴(Timeline)通常用于展示一系列事件或任务的时间顺序。结合弹出效果,可以在用户交互时显示详细信息或操作选项。
以下是一个简单的 CSS 时间轴弹出效果的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Timeline Popup</title>
<style>
.timeline {
position: relative;
width: 80%;
margin: 50px auto;
}
.timeline-item {
position: relative;
margin-bottom: 20px;
}
.timeline-item::before {
content: '';
position: absolute;
top: 10px;
left: -20px;
width: 10px;
height: 10px;
background-color: #007bff;
border-radius: 50%;
}
.timeline-content {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
display: none;
}
.timeline-item:hover .timeline-content {
display: block;
}
</style>
</head>
<body>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h3>Event 1</h3>
<p>Description of Event 1</p>
</div>
<span>2023-01-01</span>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>Event 2</h3>
<p>Description of Event 2</p>
</div>
<span>2023-02-01</span>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>Event 3</h3>
<p>Description of Event 3</p>
</div>
<span>2023-03-01</span>
</div>
</div>
</body>
</html>
.timeline-item:hover .timeline-content
选择器是否正确,并确保 display: none;
和 display: block;
设置正确。.timeline-item
和 .timeline-content
的 position
属性设置正确,并调整 top
、left
等属性以调整位置。通过以上方法,你可以创建一个简单的 CSS 时间轴弹出效果,并解决常见的实现问题。
没有搜到相关的文章