在DZ論壇上有時候我們會看到一些文字滾動的效果,那么這個滾動效果是如何實現的呢?
<marquee>我是滾動的文字</marquee>
上面這段代碼就是實現文字滾動效果的代碼,其中marquee標簽用于實現滾動效果。
當然,該標簽是基于HTML的舊標準,在新標準中已經被棄用。因此,如果你想要實現文字滾動效果,推薦使用CSS的相關屬性。
/* 實現文字滾動效果 */
.scroll-text {
overflow: hidden;
position: relative;
}
.scroll-text p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
-webkit-animation: scroll linear 15s infinite;
animation: scroll linear 15s infinite;
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes scroll {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
上面這段代碼使用CSS實現了文字滾動,其主要是用了CSS3的動畫屬性實現。其中,overflow: hidden用于隱藏文字溢出的部分,position: relative用于設置相對定位,而position: absolute用于設置絕對定位,使文字能夠在元素內部滾動。
大家可以根據自己的需求,使用HTML或CSS來實現文字滾動效果。不過記得合理使用,不要影響他人正常使用。
上一篇dw設置新建html5
下一篇背景圖片css尺寸代碼