其他杂项

others
其他系统相关杂项问题

html5实现字幕滚动代码

1年前 (2024-10-09)其他杂项1865

网站需要做个字幕滚动效果,以前的marquee写法已过时,网上找了个纯html写法,JS也不需要,比较满意。

33.jpg

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
@keyframes move
{
0%
{
transform:translateY(0px);
}
50%
{
transform:translateY(-200px);
}
100%
{
transform:translateY(0px);
}
}
.picTab{height:500px;border:2px solid #000; margin:50px auto;overflow:hidden;}
.picTab .topDiv{width:1000px;height:500px; animation:move 5s linear infinite;text-align:center;}
.picTab div {margin:5px;color:black;  }
</style>
</head>
<body>
<DIV class="picTab">
<div  class="topDiv">
<div>"控制洗衣机"</div>
<div>"控制冰箱"</div>
<div>"开启洗衣机"</div>
<div>"开始洗衣"</div>
<div>"关闭洗衣机"</div>
<div>"棉麻洗"</div>
<div>"洗涤时间设为20分钟"</div>
<div>"漂洗2次"</div>
<div>"脱水6分钟"</div>
<div>"冰箱设为速冷模式"</div>
<div>"冷藏室温度设为5度"</div>
<div>"天气"</div>
</div>
</DIV>
</body>
</html>



版权声明:本文由三循信息发布,如需转载请注明出处,如需分享可点击上方生成海报按钮。

分享给朋友:

相关文章

Win10系统22H2版本如何关闭讨厌的热门搜索推荐栏

Win10系统22H2版本如何关闭讨厌的热门搜索推荐栏

本人电脑以前是win10系统21H1版本,已经手动关闭了系统自带所有广告提示,今天电脑自动升级到了22H2版本,居然在使用本地搜索功能时出现一个热门搜索栏。里面显示乱七八糟的推荐内容,一旦点击,就会跳转到Edge浏览器中Bing搜索结果页面...

pbootcms多语言建站常见问题(转载)

pbootcms多语言建站常见问题(转载)

一、如何搭建多语言站?多语言/区域建站用于使用同一个后台建立多语言网站。1、使用步骤1)在后台”系统管理>数据区域”添加相应的区域,具体参考默认区域;2)将多语言的模板放入模板目录,不同语言的模板均放在template目录下;3)在后...

宝塔Nginx环境下让404打不开页面自动跳转到首页

宝塔Nginx环境下让404打不开页面自动跳转到首页

因为前段时间更改了西京同城导航网站的程序,导致以前许多页面打不开,看在眼里急在心里,如何解决呢?第一步:登录宝塔后台网站设置的伪静态规则页面,一律删除以前程序用到的伪静态规则第二步:利用万能的百度后知道在配置文件中需要添加以下代码serve...

WIN10系统Edge浏览器如何启用IE模式访问网银网站

WIN10系统Edge浏览器如何启用IE模式访问网银网站

因为本人需要和长安银行每季度进行网银对账,每每碰到Win10系统不好登录长安银行网银网站问题,在此分享解决办法。不得不说这些银行真的落伍,什么年代了还让客户必须用IE浏览器访问你的网站才可以登录。微软公司启用了谷歌内核的Edge浏览器,不再...

win10系统如何删除任务栏图标残留

win10系统如何删除任务栏图标残留

本人win10电脑上装过一些软件后已删除,但是发现在“选择哪些图标显示在任务栏上”里面仍然存在这些软件名字,让完美倾向者看着非常难受。网上搜索发现不少人也遇到这问题,并提出了解决方法。我参照一个方案进行操作,发现没起作用。后来经过反复对比,...

转载的CSS两列布局,三列布局方法

转载的CSS两列布局,三列布局方法

下面方法主要用的display:inline-block属性,设置同行DIV宽度,另一个DIV用margin限制宽度。按照文档流默认显示方法CSS两列布局,右侧固定,左侧自适应宽度 <div style="widt...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
现在,非常期待与您的又一次邂逅

我们努力让每一次邂逅总能超越期待

智能客服
欢迎咨询智能客服,我可以回答些简单问题