Rolling text (1)

Posted on by Roy Chan

rolling text 1
如果你有數個重要的訊息想在網頁上顯示，設置一個上下滾動的文字方塊是一個不錯的選擇， 既有動態又不花巧，編程也不太複雜。

用 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;}
}

發表迴響