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>
<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>