黑松山资源网 Design By www.paidiu.com
实现效果
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 时间轴的资料请关注其它相关文章!
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览
- [妙音金曲]群星《悲情咖啡屋》(黑胶)2CD[DTS-WAV]
- 阿兰·达瓦卓玛《A-Lan阿兰唯美歌姬》2CD[DTS-WAV]
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路