CSS樣式滾動文字是一種很酷的效果,利用CSS的動畫屬性,使文字產生滾動的效果,讓網頁更加生動有趣。
/* 設置滾動文字的樣式 */ .scrolltext{ position: relative; /* 相對定位,方便后面設置內部元素樣式 */ height: 30px; /* 設置高度 */ overflow: hidden; /* 隱藏多余文字 */ } .scrolltext p{ position: absolute; /* 絕對定位,方便設置動畫 */ top: 0; /* 設置文字出現的位置 */ left: 0; line-height: 30px; /* 行高等于容器高度 */ animation: scrolltext 5s linear infinite; /* 設置動畫,5秒一輪循環 */ } @keyframes scrolltext{ 0%{ transform: translateX(0); /* 起始位置,不移動 */ } 100%{ transform: translateX(-100%); /* 移動到左側,向左滾動 */ } }
以上是設置滾動文字的樣式的CSS代碼,接下來是HTML代碼,只需要在需要滾動文字效果的地方添加如下代碼。
這里是滾動的文字效果,可以適當增加字數。
以上代碼中的 div 標簽是容器,class 屬性設置為 scrolltext,內部是一個 p 標簽,用來寫滾動的文字,其中要注意容器高度和行高相等。
最后,這是一種很簡單的CSS滾動文字效果,可以根據需求進行修改和定制,使其更好地融入到網頁中去。
上一篇css樣式用作函數鉤子
下一篇css樣式的框模型