css怎么实现上下滚动

王朝干货 · 作者: 佚名 2023-06-28
标签:   字体: |||超大
 
Abstract
css实现上下滚动效果如下:
Text

css实现上下滚动代码如下:

<div class="scrollcontainer">
<div><a href="#">这是需要滚动的内容……</a>
<a href="#">这也是需要滚动的内容……</a>
<a href="#">这还是需要滚动的内容……</a></div>
</div>
<style>
.scrollcontainer {width: 250px;height: 20px;border: 1px solid #ccc;overflow: hidden;}
.scrollcontainer div {animation: scroll 25s linear infinite;}
.scrollcontainer div:hover{animation-play-state:paused}
.scrollcontainer a{display:block;}
@keyframes scroll {0% {transform: translateY(0);}100% {transform: translateY(-100%);}}
</style>

 
 
Recommend
 
>>返回首頁<<