html5+css实现横向时间轴特效
时间: 2023-11-18 09:04:21 浏览: 49
可以通过以下步骤实现横向时间轴特效:
1. 创建一个 div 元素作为容器,并设置其宽度和高度。
2. 在容器内部创建一个 ul 元素,并设置其 display 属性为 flex 展示方式。
3. 在 ul 元素内部创建多个 li 元素,并设置其宽度、高度、边框等样式属性。
4. 使用伪元素 ::before 和 ::after 为每个 li 元素添加一个小圆点和连接线。
5. 设置 li 元素的位置,使其按照时间顺序排列,并设置其 z-index 属性,使其在容器内部居中显示。
6. 使用 JavaScript 或 CSS 动画添加动效,如滚动、渐变等。
下面是一个简单的 HTML 和 CSS 代码示例:
```
<div class="timeline">
<ul>
<li>
<div class="date">2021-01-01</div>
<div class="content">事件1</div>
</li>
<li>
<div class="date">2021-02-01</div>
<div class="content">事件2</div>
</li>
<li>
<div class="date">2021-03-01</div>
<div class="content">事件3</div>
</li>
</ul>
</div>
.timeline {
width: 100%;
height: 100%;
overflow-x: auto;
position: relative;
}
.timeline ul {
display: flex;
justify-content: center;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.timeline ul li {
width: 300px;
height: 200px;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
margin: 0 20px;
z-index: 1;
}
.timeline ul li::before {
content: "";
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
position: absolute;
top: 50%;
left: -5px;
transform: translateY(-50%);
z-index: 2;
}
.timeline ul li::after {
content: "";
width: 20px;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 2;
}
.timeline ul li:first-child {
margin-left: 0;
}
.timeline ul li:last-child {
margin-right: 0;
}
.timeline ul li.active {
border-color: #f00;
}
.timeline ul li.active::before {
background: #f00;
}
.timeline ul li.active .content {
display: block;
opacity: 1;
animation: fadeIn 1s;
}
.timeline ul li .content {
display: none;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
text-align: center;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
```
通过以上代码,可以实现一个简单的横向时间轴特效。你可以根据自己的需求和具体情况修改样式和动效。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)