时间:2021-05-08
实现效果
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 时间轴的资料请关注其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS3动画和JS动画的区别JS实现的是帧动画CSS3实现的是补间动画帧动画:使用定时器,每隔一段时间,更改当前的元素补间动画:过渡(加过渡只要状态发生改变产生
这几天在看一些css3动画的源码实现时,发现css代码的animation当中有一个比较陌生的单词steps,在源码中是这么写的:animation:thund
找ps时间轴在哪的方法是: 1、打开ps,在窗口中点击时间轴,调出时间轴面板后,选择创建视频时间轴。 2、选择了视频时间轴面板后,若想切换到帧动画面板,可以
在web项目中我们经常要使用时间轴(timeline)控件。本文提供一种基于CSS3的可逐项展开的timeline,在各展开项中可以嵌入文本、图片、视频等元素。
本文实例讲述了DevExpress采用ChartControl实现时间轴的方法,分享给大家供大家参考。具体实现方法如下:关键代码如下:复制代码代码如下:usin