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> ```