1. 首页
  2. 网站建设
  3. 正文

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

  律师网站建设中用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

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;

  }

}


    延伸阅读

  • 律师网站建设

    在数字化时代,网站作为企业与个人品牌建立在线存在的关键,对律师和法律事务所而言尤为重要。那么,如何构建一个既专业又能吸引目标客户的律师网站呢?这篇文章将深入探讨构建专业律师网站...

  • 律师网站建设的重要性与实施策略

    在信息化时代,网络已成为人们获取信息的重要渠道。对于法律服务行业而言,一个专业、全面、易用的律师网站不仅是展示律师团队实力的平台,还是吸引客户、提供服务的重要工具。因此,律师网...

  • 律师网站建设,从设计理念到实用功能的全面解析

    在信息化快速发展的当代,无论是个体还是企业,网络平台都成为展示自我和扩大业务的重要渠道。对于律师和律师事务所来说,拥有一个专业、易用、功能全面的网站显得尤为重要。但如何构建一个...

  • 律师网站建设的重要性及策略

    在数字化时代,网络逐渐成为了我们生活和工作的重要部分。对于律师来说,建立自己的专业网站不仅可以扩大自己的知名度和影响力,也可以方便的为客户提供专业的法律咨询服务。因此,如何构建...

  • 律师网站建设:打造专业、高效的律师网站

    随着互联网的快速发展,律师网站建设逐渐成为律师事务所提升企业形象和获取客户的重要手段。一个优秀的律师网站不仅能吸引更多的潜在客户,还能展示律师事务所的专业能力和信誉度。本文将为...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/3597.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();