CSS3 标题-线动画-备注 · 话说前端这口砖

``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3样式</title> <style> .modular { background: #f5f5f5; } .modular-title { text-align: center; font-size: 34px; color: #434343; font-weight: 300; height: 40px; line-height: 40px; overflow: hidden; } .modular-explain { width: 800px; margin: 0 auto; font-size: 14px; color: #aaa; line-height: 25px; text-align: center; } .nex_pubsliders { text-align: center; position: relative; margin: 25px 0; height: 2px; } .nex_pubsliders:before { content: ''; position: absolute; width: 132px; height: 2px; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #0095FF; } .nex_pubsliders:after { content: ''; width: 32px; height: 2px; position: absolute; left: 50%; bottom: 0; border-left: 10px solid #f5f5f5; border-right: 10px solid #f5f5f5; -webkit-animation: nexsliderbar 5s linear infinite; animation: nexsliderbar 5s linear infinite; background: #0095FF; } @-webkit-keyframes nexsliderbar { 0% { -webkit-transform: translateX(-70px); transform: translateX(-70px); } 50% { -webkit-transform: translateX(38px); transform: translateX(38px); } 100% { -webkit-transform: translateX(-70px); transform: translateX(-70px); } } @keyframes nexsliderbar { 0% { -webkit-transform: translateX(-70px); transform: translateX(-70px); } 50% { -webkit-transform: translateX(38px); transform: translateX(38px); } 100% { -webkit-transform: translateX(-70px); transform: translateX(-70px); } } </style> </head> <body> <div class="modular"> <div class="modular-title">深圳市凌启电子商务有限公司</div> <div class="nex_pubsliders"></div> <div class="modular-explain"> 经营范围包括汽车电子、无线数据终端、集成电路、电子产品及配件、计算机软硬件的设计、研发、咨询及销售；手机、电脑、电器设备、通讯设备、数码产品及配件的技术开发、技术咨询与销售；国内贸易，经营进出口业务</div> <div class=""> dsadada </div> </div> </body> </html> ```