xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

HTML marquee

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

html marquee


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


posted @   xgqfrms  阅读(207)  评论(2编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2019-03-27 js auto hover button & html5 button autofocus
2019-03-27 css & clearfix & clear-fixed
点击右上角即可分享
微信分享提示