律师网站建设中用CSS3实现时间轴动画

  • 2020-12-09
  • 61

实现效果

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 实现时间轴动画的代码内容,更多文章请浏览本站网站技术栏目。

相关阅读

律师网站设计中用CSS实现宽度自适应16:9的矩形

CSS3变形透视动画-3-cyy

CSS3FLEX弹性盒模型让布局飞起来-2-cyy

CSS3FLEX弹性盒模型让布局飞起来-cyy

轻松掌握CSS3定位布局特性-cyy

成都律品科技有限公司专注律师互联网营销技术服务,创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年,2018年公司正式成立,不断探索律师行业服务需求,致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。

在线咨询
  • 152-0832-9147

  • 105991110

全时在线,如未回复请留下联系方式

微信咨询