如果你有數個重要的訊息想在網頁上顯示,設置一個上下滾動的文字方塊是一個不錯的選擇, 既有動態又不花巧,編程也不太複雜。
用 HTML5 的 ul 和 li 語法設置一個文字列表項目 :
1 2 3 4 5 6 7 8 9 | <div class="main-container"> <div class="text-container"> <ul> <li>Simple is beautiful</li> <li>It is amazing</li> <li>I like open source</li> </ul> </div> </div> |
技巧一
使用 overflow 的屬性使列表項目只顯示一行文字:
1 2 3 4 5 6 | .text-container { height:35px; overflow:hidden; border-radius:10px; width:250px; } |
技巧二
使用 animation 和 @keyframes 的屬性設置 ul 文字列表項目的滾動特性,包括快慢,方向等等:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .text-container ul { animation: 12s linear 0s normal none infinite change1; } @keyframes change1 { 0% {margin-top:0px;} 15% {margin-top:0px;} 25% {margin-top:-35px;} 40% {margin-top:-35px;} 50% {margin-top:-70px;} 65% {margin-top:-70px;} 75% {margin-top:-35px;} 85% {margin-top:-35px;}. 100% {margin-top:0;} } |
驟眼看來好像有點複雜,但不用編寫 javascript 便能夠做出動態的效果,其實也算是一個不錯的選擇。
做出來的的文字滾動效果如下 :
css style 的完整源碼如下 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | .main-container { width:300px; height:100px; padding-top:50px; padding-left:35px; background:#ddd; } .text-container { height:35px; overflow:hidden; border-radius:10px; width:250px; } .text-container ul { color:#fff; background:#428BCA; padding-left:10px; padding-right:10px; text-align:center; list-style:none; animation: 12s linear 0s normal none infinite change1; -webkit-animation: 12s linear 0s normal none infinite change1; -moz-animation:12s linear 0s normal none infinite change1; -o-animation:12s linear 0s normal none infinite change1; } .text-container ul li { font-size:22px; line-height:35px; } @-webkit-keyframes change1 { 0% {margin-top:0px;} 15% {margin-top:0px;} 25% {margin-top:-35px;} 40% {margin-top:-35px;} 50% {margin-top:-70px;} 65% {margin-top:-70px;} 75% {margin-top:-35px;} 85% {margin-top:-35px;} 100% {margin-top:0;} } @keyframes change1 { 0% {margin-top:0px;} 15% {margin-top:0px;} 25% {margin-top:-35px;} 40% {margin-top:-35px;} 50% {margin-top:-70px;} 65% {margin-top:-70px;} 75% {margin-top:-35px;} 85% {margin-top:-35px;} 100% {margin-top:0;} } |