HTML marquee

跑马灯

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMarqueeElement

https://developer.cdn.mozilla.net/zh-CN/docs/Web/HTML/Element/marquee

https://www.tutorialspoint.com/html/html_marquees.htm


<marquee>This text will scroll from right to left</marquee> <marquee direction="up">This text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>

This text will scroll from right to left

This text will scroll from bottom to top

This text will bounce

demo

https://api.cmsfg.com/app/hospital/600100/index.html#/HospitalHome?AppId=600100


css animation

marquee


marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}

https://stackoverflow.com/questions/31951282/why-is-marquee-deprecated-and-what-is-the-best-alternative


HTML marquee的更多相关文章

  1. marquee上下左右循环无缝滚动代码

    一.横向滚动<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN "><HTML>< ...

  2. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  3. TextView属性android:ellipsize="marquee"不生效的解决办法

    最近自己在写自己的第一个app,过程中遇到了这个问题,查了不少帖子,经过尝试发现,这种问题一般分为两类: 1. TextView的Text值赋值后不更改,很多帖子上说如下写法就可以生效: <Te ...

  4. marquee标签,好神奇啊...

    <html><body><div style="height:190; margin-top:10; margin-bottom:10; width:96%; ...

  5. Marquee 滚动参数

    new marquee("Layer3", 2, 1, 989, 68, 20, 0, 0, 238); 参数说明:Layer3 :容器ID 2 :向上滚动(0向上 1向下 2向左 ...

  6. HTML标签marquee实现滚动效果

    html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记不仅可以移动文字,也可以移动图片,表格等.只需要在<ma ...

  7. marquee 标签 文字滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. marquee标签实现页面内容的滚动效果

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  9. marquee 实现首尾相连循环滚动效果

    <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等  marquee标签不是HTML3.2 ...

  10. 一个不陌生的JS效果-marquee,用css3来实现

    关于marquee,就不多说了,可以戳这里. 毕竟他是一个很古老的元素,现在的标准里头也不推荐使用这个标签了.但平时一些项目中会经常碰到这样的效果,每次都是重新写一遍,麻烦! JS类实现marquee ...

随机推荐

  1. list中map 的value值时间排序

    public static void main(String[] args) { String sys=DateUtil.getTime().substring(0,5); System.out.pr ...

  2. Centos 7 Redis 安装并开机启动

    一.下载并编译 cd /usr/local/bin目录可以自己选,我将redis安装到/usr/local/bin目录下.wget http://download.redis.io/releases/ ...

  3. Communicating sequential processes CSP 通信顺序进程 CSP writing to a file by name (process, Erlang) vs. writing to a file descriptor (channel, Go)

    the-way-to-go_ZH_CN/01.2.md at master · Unknwon/the-way-to-go_ZH_CN https://github.com/Unknwon/the-w ...

  4. Python学习【第3篇】:列表魔法

    ##########################深灰魔法-list类中提供的方法###################list 类,列表list = [1,12,9,"age" ...

  5. 不会开发的你也能管理好企业漏洞,开源免费工具:洞察(insight II)

    前言 公司刚开始建设安全管理时,都是从一片混沌开始的,资源总是不够的,我们每个做安全的人员,又要会渗透,又要抓制度,还得管理各种漏洞.在管理楼栋是,我相信大家都遇到过以下几个问题: 漏洞提交太多,自己 ...

  6. Redis 实战 —— 12. 降低内存占用

    简介 降低 Redis 的内存占用有助于减少创建快照和加载快照所需的时间.提升载入 AOF 文件和重写 AOF 文件时的效率.缩短从服务器进行同步所需的时间(快照. AOF 文件重写在 持久化选项 中 ...

  7. Linux命令之Crontab定时任务,利用Crontab定时执行spark任务

    Linux命令之Crontab定时任务,利用Crontab定时执行spark任务 一.Linux命令之Crontab定时任务 1.1 常见Crontab任务 1.1.1 安装crontab 1.1.2 ...

  8. 天融信Top-app LB负载均衡SQL注入0day

    POST /acc/clsf/report/datasource.php HTTP/1.1 Host: Connection: close Accept: text/javascript, text/ ...

  9. msf+cobaltstrike联动(一):把msf的session发给cobaltstrike

    前提:MFS已经获取到session,可以进入metepreter,现在需要使用cobaltstrike进行图形化管理或团队协作. cobaltstrike起一个beacon监听,如使用:window ...

  10. Eureka详解系列(四)--Eureka Client部分的源码和配置

    简介 按照原定的计划,我将分三个部分来分析 Eureka 的源码: Eureka 的配置体系(已经写完,见Eureka详解系列(三)--探索Eureka强大的配置体系): Eureka Client ...