html如何上下滚动字幕,css如何做滚动字幕效果？
css如何做滾動字幕效果？下面本篇文章給大家介紹一下使用CSS做滾動字幕效果的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
在CSS中，可以利用animation屬性和@keyframes規則，配合top屬性來實現滾動字幕效果。
話不多說，直接上實例代碼
moveUpul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.container {
display: inline-block;
background: #efefef;
padding: 10px;
border: 1px solid #ccc;
font-family: "Microsoft YaHei";
}
.container .li-box {
height: 28px;
overflow: hidden;
}
.container ul {
position: relative;
animation: moveUp 8s 0.6s infinite;
-webkit-animation: moveUp 8s 0.6s infinite;
}
@keyframes moveUp {
0% {
top: 0px;
}
18% {
top: 0px;
}
20% {
top: -28px;
}
38% {
top: -28px;
}
40% {
top: -56px;
}
58% {
top: -56px;
}
60% {
top: -84px;
}
78% {
top: -84px;
}
80% {
top: -112px;
}
98% {
top: -112px;
}
}
@-webkit-keyframes moveUp
/*Safari and Chrome*/
{
0% {
top: 0px;
}
18% {
top: 0px;
}
20% {
top: -28px;
}
38% {
top: -28px;
}
40% {
top: -56px;
}
58% {
top: -56px;
}
60% {
top: -84px;
}
78% {
top: -84px;
}
80% {
top: -112px;
}
98% {
top: -112px;
}
}
.container li {
line-height: 1.8;
color: #666;
}
- 滾動字幕1
- 滾動字幕2
- 滾動字幕3
- 滾動字幕4
- 滾動字幕5
- 滾動字幕6
效果圖：
更多web前端開發知識，請查閱 HTML中文網 ！！
總結
以上是生活随笔為你收集整理的html如何上下滚动字幕,css如何做滚动字幕效果？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小明加密通道进入_德州人行通道闸哪个牌子
- 下一篇： 无线通信sip服务器常用品牌,一种无线M