资讯论坛»论坛 › ※会员之家※ › 技术分享 › 纯css文字向上单条轮播滚动代码

回帖中禁止出现的内容，违者将被直接永久禁止访问，删除ID处理：1.违反法律法规，包括但不限于出现带有政治、色情、暴恐信息等内容；2.恶意攻击内容，包括但不限于：恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等；3.广告、推广内容，尤其出现带有病毒、恶意代码、广告链接等内容，包括但不限于：QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等；4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

查看: 748|回复: 0

纯css文字向上单条轮播滚动代码

[复制链接]

升平网络工作室

8436 主题	8471 帖子	9396 积分

管理员

Rank: 9 Rank: 9 Rank: 9

积分: 9396

发表于 2020-3-15 13:41:47 | 显示全部楼层 |阅读模式

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="applicable-device"content="pc,mobile">
<div class="notice">
<ul>
<li>第1条公告</li>
<li>第2条公告</li>
<li>第3条公告</li>
<li>第4条公告</li>
<li>第5条公告</li>
<li>第6条公告</li>
<li>第7条公告</li>
<li>第8条公告</li>
<li>第9条公告</li>
<li>第10条公告</li>
</ul>
</div>
<style>
@keyframes scroll {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
10% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
20% {
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
}
30% {
-webkit-transform: translateY(-90px);
transform: translateY(-90px);
}
40% {
-webkit-transform: translateY(-120px);
transform: translateY(-120px);
}
50% {
-webkit-transform: translateY(-150px);
transform: translateY(-150px);
}
60% {
-webkit-transform: translateY(-180px);
transform: translateY(-180px);
}
70% {
-webkit-transform: translateY(-210px);
transform: translateY(-210px);
}
80% {
-webkit-transform: translateY(-240px);
transform: translateY(-240px);
}
90% {
-webkit-transform: translateY(-270px);
transform: translateY(-270px);
}
100% {
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
}
}
*{
margin:0;padding:0;
}
div {
width: 600px;
height: 30px;
overflow: hidden;
}
ul {
height: 100%;
width: 100%;
-webkit-animation: scroll 30s infinite;
}
li {
line-height: 30px;
height: 30px;
}
</style>

复制代码

打赏鼓励一下！

打赏

使用道具举报

返回列表

回帖中禁止出现的内容，违者将被直接永久禁止访问，删除ID处理：1.违反法律法规，包括但不限于出现带有政治、色情、暴恐信息等内容；2.恶意攻击内容，包括但不限于：恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等；3.广告、推广内容，尤其出现带有病毒、恶意代码、广告链接等内容，包括但不限于：QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等；4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

新用户