网页技术交流
 
发新帖
楼主: 零五零八
查看: 659|回复: 0

[其它] CSS3 实现时间轴动画

[复制链接]
零五零八 发表于 2021-2-1 20:46:22 | 显示全部楼层
本帖最后由 零五零八 于 2021-2-1 20:48 编辑

实现效果

1.gif

html

  1. <h2>CSS3 Timeline</h2>
  2. <p>Please set the $vertical variable to false to see the horizontal version.</p>
  3. <ul id='timeline'>
  4.   <li class='work'>
  5.     <input class='radio' id='work5' name='works' type='radio' checked>
  6.     <div class="relative">
  7.       <label for='work5'>Lorem ipsum dolor sit amet</label>
  8.       <span class='date'>12 May 2013</span>
  9.       <span class='circle'></span>
  10.     </div>
  11.     <div class='content'>
  12.       <p>
  13.         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.
  14.       </p>
  15.     </div>
  16.   </li>
  17.   <li class='work'>
  18.     <input class='radio' id='work4' name='works' type='radio'>
  19.     <div class="relative">
  20.       <label for='work4'>Lorem ipsum dolor sit amet</label>
  21.       <span class='date'>11 May 2013</span>
  22.       <span class='circle'></span>
  23.     </div>
  24.     <div class='content'>
  25.       <p>
  26.         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.
  27.       </p>
  28.     </div>
  29.   </li>
  30.   <li class='work'>
  31.     <input class='radio' id='work3' name='works' type='radio'>
  32.     <div class="relative">
  33.       <label for='work3'>Lorem ipsum dolor sit amet</label>
  34.       <span class='date'>10 May 2013</span>
  35.       <span class='circle'></span>
  36.     </div>
  37.     <div class='content'>
  38.       <p>
  39.         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.
  40.       </p>
  41.     </div>
  42.   </li>
  43.   <li class='work'>
  44.     <input class='radio' id='work2' name='works' type='radio'>
  45.     <div class="relative">
  46.       <label for='work2'>Lorem ipsum dolor sit amet</label>
  47.       <span class='date'>09 May 2013</span>
  48.       <span class='circle'></span>
  49.     </div>
  50.     <div class='content'>
  51.       <p>
  52.         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.
  53.       </p>
  54.     </div>
  55.   </li>
  56.   <li class='work'>
  57.     <input class='radio' id='work1' name='works' type='radio'>
  58.     <div class="relative">
  59.       <label for='work1'>Lorem ipsum dolor sit amet</label>
  60.       <span class='date'>08 May 2013</span>
  61.       <span class='circle'></span>
  62.     </div>
  63.     <div class='content'>
  64.       <p>
  65.         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.
  66.       </p>
  67.     </div>
  68.   </li>
  69. </ul>
复制代码

CSS

  1. /* -------------------------------------
  2. * For horizontal version, set the
  3. * $vertical variable to false
  4. * ------------------------------------- */
  5. /* -------------------------------------
  6. * General Style
  7. * ------------------------------------- */
  8. @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
  9. body {
  10.   max-width: 1200px;
  11.   margin: 0 auto;
  12.   padding: 0 5%;
  13.   font-size: 100%;
  14.   font-family: "Noto Sans", sans-serif;
  15.   color: #eee9dc;
  16.   background: #48b379;
  17. }

  18. h2 {
  19.   margin: 3em 0 0 0;
  20.   font-size: 1.5em;
  21.   letter-spacing: 2px;
  22.   text-transform: uppercase;
  23. }

  24. /* -------------------------------------
  25. * timeline
  26. * ------------------------------------- */
  27. #timeline {
  28.   list-style: none;
  29.   margin: 50px 0 30px 120px;
  30.   padding-left: 30px;
  31.   border-left: 8px solid #eee9dc;
  32. }
  33. #timeline li {
  34.   margin: 40px 0;
  35.   position: relative;
  36. }
  37. #timeline p {
  38.   margin: 0 0 15px;
  39. }

  40. .date {
  41.   margin-top: -10px;
  42.   top: 50%;
  43.   left: -158px;
  44.   font-size: 0.95em;
  45.   line-height: 20px;
  46.   position: absolute;
  47. }

  48. .circle {
  49.   margin-top: -10px;
  50.   top: 50%;
  51.   left: -44px;
  52.   width: 10px;
  53.   height: 10px;
  54.   background: #48b379;
  55.   border: 5px solid #eee9dc;
  56.   border-radius: 50%;
  57.   display: block;
  58.   position: absolute;
  59. }

  60. .content {
  61.   max-height: 20px;
  62.   padding: 50px 20px 0;
  63.   border-color: transparent;
  64.   border-width: 2px;
  65.   border-style: solid;
  66.   border-radius: 0.5em;
  67.   position: relative;
  68. }
  69. .content:before, .content:after {
  70.   content: "";
  71.   width: 0;
  72.   height: 0;
  73.   border: solid transparent;
  74.   position: absolute;
  75.   pointer-events: none;
  76.   right: 100%;
  77. }
  78. .content:before {
  79.   border-right-color: inherit;
  80.   border-width: 20px;
  81.   top: 50%;
  82.   margin-top: -20px;
  83. }
  84. .content:after {
  85.   border-right-color: #48b379;
  86.   border-width: 17px;
  87.   top: 50%;
  88.   margin-top: -17px;
  89. }
  90. .content p {
  91.   max-height: 0;
  92.   color: transparent;
  93.   text-align: justify;
  94.   word-break: break-word;
  95.   hyphens: auto;
  96.   overflow: hidden;
  97. }

  98. label {
  99.   font-size: 1.3em;
  100.   position: absolute;
  101.   z-index: 100;
  102.   cursor: pointer;
  103.   top: 20px;
  104.   transition: transform 0.2s linear;
  105. }

  106. .radio {
  107.   display: none;
  108. }

  109. .radio:checked + .relative label {
  110.   cursor: auto;
  111.   transform: translateX(42px);
  112. }
  113. .radio:checked + .relative .circle {
  114.   background: #f98262;
  115. }
  116. .radio:checked ~ .content {
  117.   max-height: 180px;
  118.   border-color: #eee9dc;
  119.   margin-right: 20px;
  120.   transform: translateX(20px);
  121.   transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
  122. }
  123. .radio:checked ~ .content p {
  124.   max-height: 200px;
  125.   color: #eee9dc;
  126.   transition: color 0.3s linear 0.3s;
  127. }

  128. /* -------------------------------------
  129. * mobile phones (vertical version only)
  130. * ------------------------------------- */
  131. @media screen and (max-width: 767px) {
  132.   #timeline {
  133.     margin-left: 0;
  134.     padding-left: 0;
  135.     border-left: none;
  136.   }
  137.   #timeline li {
  138.     margin: 50px 0;
  139.   }

  140.   label {
  141.     width: 85%;
  142.     font-size: 1.1em;
  143.     white-space: nowrap;
  144.     text-overflow: ellipsis;
  145.     overflow: hidden;
  146.     display: block;
  147.     transform: translateX(18px);
  148.   }

  149.   .content {
  150.     padding-top: 45px;
  151.     border-color: #eee9dc;
  152.   }
  153.   .content:before, .content:after {
  154.     border: solid transparent;
  155.     bottom: 100%;
  156.   }
  157.   .content:before {
  158.     border-bottom-color: inherit;
  159.     border-width: 17px;
  160.     top: -16px;
  161.     left: 50px;
  162.     margin-left: -17px;
  163.   }
  164.   .content:after {
  165.     border-bottom-color: #48b379;
  166.     border-width: 20px;
  167.     top: -20px;
  168.     left: 50px;
  169.     margin-left: -20px;
  170.   }
  171.   .content p {
  172.     font-size: 0.9em;
  173.     line-height: 1.4;
  174.   }

  175.   .circle, .date {
  176.     display: none;
  177.   }
  178. }
复制代码




快速回复 返回顶部 返回列表