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 相关文章推荐
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python安装Scrapy图文教程
2017/08/14 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
儿童python练习实例
2018/05/27 Python
python单例模式实例解析
2018/08/28 Python
如何基于Python批量下载音乐
2019/11/11 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
如何理解Python中的变量
2020/06/01 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
python 模拟登陆github的示例
2020/12/04 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
高中生的自我评价
2014/03/04 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2016新年慰问信范文
2015/03/25 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
HTML中的表格元素介绍
2022/02/28 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS