<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Timeline</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<ul class="timeline">
<li class="timeline__line"></li>
<li class="timeline__item start">
<div class="info">
<div class="dot"></div>
<time class="time">08:30</time>
<h4 class="title">签到</h4>
</div>
</li>
<li class="timeline__item">
<div class="info">
<div class="dot"></div>
<time class="time">09:30</time>
<h4 class="speaker">陈慧晶</h4>
<h4 class="title">
<a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/hmzpxe"
>新时代CSS布局
</a>
</h4>
</div>
<div class="content">
CSS布局经常是令前端开发者头痛的一块工作。但是近几年来，浏览器不断发展，开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局而编写的。我们将深入了解这些新属性的特征，新时代的布局技巧、例子及最佳实践。希望听众会有所启发，利用这些新的CSS属性创造更符合浏览器本质的设计。
</div>
</li>
<li class="timeline__item">
<div class="info">
<div class="dot"></div>
<time class="time">10:20</time>
<h4 class="speaker">大漠</h4>
<h4 class="title">
<a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/no7l1o"
>剖析css-tricks新版，为你所用</a
>
</h4>
</div>
<div class="content">
新版css-tricks.com网站在社交媒体上得到众多好评，今天我们就一起来聊聊这次改版中运用到的一些新特性，这些新特性对用户体验带来什么样的改变，我们又如何将这些新特性运用于自己的项目中。
</div>
</li>
<li class="timeline__item break">
<div class="info">
<div class="dot"></div>
<time class="time">12:00</time>
<h4 class="title">午餐</h4>
</div>
</li>
<li class="timeline__item">
<div class="info">
<div class="dot"></div>
<time class="time">13:00</time>
<h4 class="speaker">张鑫旭</h4>
<h4 class="title">
<a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/rpl1tf"
>CSS创意与视觉表现</a
>
</h4>
</div>
<div class="content">
CSS的有趣之处就在于最终呈现出来的技能强弱与你自身的思维方式，创造力是密切相关的，本次分享通过一些精彩的案例，展现创意如何让CSS的视觉表现变得更有趣的。
</div>
</li>
<li class="timeline__item">
<div class="info">
<div class="dot"></div>
<time class="time">14:00</time>
<h4 class="speaker">袁川</h4>
<h4 class="title">
<a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/hyku3f"
>CSS生成艺术</a
>
</h4>
</div>
<div class="content">
虽然在 CSS
里不能直观地绘制出一条曲线，或者动态生成许多元素，我们仍然可以利用 CSS
属性自身的特性，结合一些基本方法和想象力生成出非常有趣的图形，进行艺术创作。此次演讲就把这些过程和所使用的方法分享给大家。
</div>
</li>
<li class="timeline__item">
<div class="info">
<div class="dot"></div>
<time class="time">14:50</time>
<h4 class="speaker">勾三股四</h4>
<h4 class="title">
<a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/vg70mz"
>你不知道的五个 CSS 新特性</a
>
</h4>
</div>
<div class="content">
分享五个讲者在近期学习标准的过程中，发现的鲜为人知的 CSS
特性，并通过相关代码、示例和故事，帮助大家发掘 CSS 更多的乐趣和用武之地。
</div>
</li>
<li class="timeline__item break">
<div class="info">
<div class="dot"></div>
<time class="time">15:40</time>
<h4 class="title">Coffee Time</h4>
</div>
</li>
<li class="timeline__item">
<div class="info">
<div class="dot"></div>
<time class="time">16:20</time>
<h4 class="speaker">Brian Birtles</h4>
<h4 class="title">
<a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/nays55"
>10 things I wish CSS authors knew about animations</a
>
</h4>
</div>
<div class="content">
动画可以让你的网站或 app
更加自然、有趣、优美，但动画本身也可能是困难、缓慢、使人不悦的。让我们来一起看看一些浏览器发行者们希望作者们知道的，关于动画常见的误解、不为人知的特性、以及即将到来的技术。
</div>
</li>
<li class="timeline__item">
<div class="info">
<div class="dot"></div>
<time class="time">17:30</time>
<h4 class="speaker">陈在真</h4>
<h4 class="title">
<a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/hbix70"
>CSS TIME</a
>
</h4>
</div>
<div class="content">
时间概念对于动画而言犹如灵魂一般，在WEB CSS中同样存在着时间范畴，Duration?
Delay?
究竟CSS的时间概念存在于哪些地方，又能起到哪些作用？我们将基于Demo实例由浅入深逐一分析CSS
TIME，也许从此你对它会有新的认知。
</div>
</li>
<li class="timeline__item end">
<div class="info">
<div class="dot"></div>
<time class="time">18:30</time>
<h4 class="title">结束</h4>
</div>
</li>
</ul>
<!-- partial -->
</body>
</html>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1e23;
}
.timeline {
position: relative;
display: grid;
gap: 40px;
padding: 0;
margin: 0;
max-width: 600px;
font-size: 0.75rem;
line-height: 1;
color: white;
list-style-type: none;
clip-path: inset(0 0 100% 0);
animation: expand 5s forwards linear;
}
.timeline .timeline__line {
position: absolute;
top: 0;
left: 6px;
width: 4px;
height: 100%;
background: white;
}
.timeline .timeline__item .info {
display: grid;
grid-template-columns: repeat(3, auto) 1fr;
align-items: center;
gap: 0.3rem;
}
.timeline .timeline__item .info h4 {
margin: 0;
}
.timeline .timeline__item .info a {
text-decoration: none;
color: #3498db;
}
.timeline .timeline__item .info .dot {
position: relative;
width: 16px;
height: 16px;
background: #1a1e23;
border-radius: 50%;
}
.timeline .timeline__item .info .dot::before {
position: absolute;
content: "";
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
background: #1a1e23;
}
.timeline .timeline__item .info .dot::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 8px;
height: 8px;
border: 4px solid white;
border-radius: inherit;
}
.timeline .timeline__item .info .time {
margin-right: 8px;
}
.timeline .timeline__item .content {
margin: 1rem 0 0 3.9rem;
line-height: 1.5;
}
@keyframes expand {
to {
clip-path: inset(0 0 0 0);
}
}