CSS3 实现时间轴动画


Posted in HTML / CSS onNovember 25, 2020

实现效果

CSS3 实现时间轴动画

html

<h2>CSS3 Timeline</h2>
<p>Please set the $vertical variable to false to see the horizontal version.</p>
<ul id='timeline'>
  <li class='work'>
    <input class='radio' id='work5' name='works' type='radio' checked>
    <div class="relative">
      <label for='work5'>Lorem ipsum dolor sit amet</label>
      <span class='date'>12 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work4' name='works' type='radio'>
    <div class="relative">
      <label for='work4'>Lorem ipsum dolor sit amet</label>
      <span class='date'>11 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work3' name='works' type='radio'>
    <div class="relative">
      <label for='work3'>Lorem ipsum dolor sit amet</label>
      <span class='date'>10 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work2' name='works' type='radio'>
    <div class="relative">
      <label for='work2'>Lorem ipsum dolor sit amet</label>
      <span class='date'>09 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work1' name='works' type='radio'>
    <div class="relative">
      <label for='work1'>Lorem ipsum dolor sit amet</label>
      <span class='date'>08 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
</ul>

css

/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */
/* -------------------------------------
 * General Style
 * ------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  font-size: 100%;
  font-family: "Noto Sans", sans-serif;
  color: #eee9dc;
  background: #48b379;
}

h2 {
  margin: 3em 0 0 0;
  font-size: 1.5em;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* -------------------------------------
 * timeline
 * ------------------------------------- */
#timeline {
  list-style: none;
  margin: 50px 0 30px 120px;
  padding-left: 30px;
  border-left: 8px solid #eee9dc;
}
#timeline li {
  margin: 40px 0;
  position: relative;
}
#timeline p {
  margin: 0 0 15px;
}

.date {
  margin-top: -10px;
  top: 50%;
  left: -158px;
  font-size: 0.95em;
  line-height: 20px;
  position: absolute;
}

.circle {
  margin-top: -10px;
  top: 50%;
  left: -44px;
  width: 10px;
  height: 10px;
  background: #48b379;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}

.content {
  max-height: 20px;
  padding: 50px 20px 0;
  border-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}
.content:before {
  border-right-color: inherit;
  border-width: 20px;
  top: 50%;
  margin-top: -20px;
}
.content:after {
  border-right-color: #48b379;
  border-width: 17px;
  top: 50%;
  margin-top: -17px;
}
.content p {
  max-height: 0;
  color: transparent;
  text-align: justify;
  word-break: break-word;
  hyphens: auto;
  overflow: hidden;
}

label {
  font-size: 1.3em;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top: 20px;
  transition: transform 0.2s linear;
}

.radio {
  display: none;
}

.radio:checked + .relative label {
  cursor: auto;
  transform: translateX(42px);
}
.radio:checked + .relative .circle {
  background: #f98262;
}
.radio:checked ~ .content {
  max-height: 180px;
  border-color: #eee9dc;
  margin-right: 20px;
  transform: translateX(20px);
  transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
  max-height: 200px;
  color: #eee9dc;
  transition: color 0.3s linear 0.3s;
}

/* -------------------------------------
 * mobile phones (vertical version only)
 * ------------------------------------- */
@media screen and (max-width: 767px) {
  #timeline {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  #timeline li {
    margin: 50px 0;
  }

  label {
    width: 85%;
    font-size: 1.1em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    transform: translateX(18px);
  }

  .content {
    padding-top: 45px;
    border-color: #eee9dc;
  }
  .content:before, .content:after {
    border: solid transparent;
    bottom: 100%;
  }
  .content:before {
    border-bottom-color: inherit;
    border-width: 17px;
    top: -16px;
    left: 50px;
    margin-left: -17px;
  }
  .content:after {
    border-bottom-color: #48b379;
    border-width: 20px;
    top: -20px;
    left: 50px;
    margin-left: -20px;
  }
  .content p {
    font-size: 0.9em;
    line-height: 1.4;
  }

  .circle, .date {
    display: none;
  }
}

以上就是CSS3 实现时间轴动画的详细内容,更多关于CSS3 时间轴的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 #HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 #HTML / CSS
CSS3 实现倒计时效果
Nov 25 #HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 #HTML / CSS
CSS3实现菜单悬停效果
Nov 17 #HTML / CSS
详解CSS3:overflow属性
Nov 17 #HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 #HTML / CSS
You might like
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python psutil库安装教程
2018/03/19 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Django实现单用户登录的方法示例
2019/03/28 Python
python 实现目录复制的三种小结
2019/12/04 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
家长给幼儿园的表扬信
2014/01/09 职场文书
2015年试用期工作总结
2014/12/12 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
Django框架之路由用法
2022/06/10 Python