100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html向上无缝滚动 JS实现文字向上无缝滚动轮播

html向上无缝滚动 JS实现文字向上无缝滚动轮播

时间:2020-08-28 07:26:04

相关推荐

html向上无缝滚动 JS实现文字向上无缝滚动轮播

在做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如多行区域文字上下滚动就是经常用到的特效。代码如下图:

样式

* {

margin: 0;

padding: 0;

}

.container {

width: 800px;

height: 300px;

border: 1px solid;

overflow: hidden;

position: relative;

}

.container ul {

list-style: none;

position: absolute;

width: 100%;

top: 0;

text-align: center;

}

.container ul >li{

width: 100%;

height: 50px;

border: 1px solid;

line-height: 50px;

}

.container >.nav {

width: 100%;

height: 50px;

line-height: 50px;

position: absolute;

background-color: red;

z-index: 1;

text-align: center;

}

结构

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。