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 @ 2020-03-27 21:50  xgqfrms  阅读(204)  评论(2编辑  收藏  举报