我正在寻找marquee标签替代品,并找到了如何通过CSS进行此操作.但是我使用的消息是可变长度的,所以可以选择将’45s’属性设置为100%,这样无论消息有多长或多短,消息都会显示所有消息和循环消息显示后再次显示?
- .marquee {
- margin: 0 auto;
- white-space: nowrap;
- overflow: hidden;
- position: absolute;
- color: #ffffff;
- background-color: #000000;
- font-family: Arial Rounded MT Bold;
- }
- .marquee span {
- display: inline-block;
- padding-left: 100%; /* show the marquee just outside the paragraph */
- animation: marquee 45s linear infinite;
- }
- @keyframes marquee {
- from { text-indent: 0%}
- to { text-indent: -150% }
- }
- <p id="PassengerNews_Scrollbar" class="microsoft marquee" style="height: 95%; width: 90%;left: 5%;top: 2%;font-size: 7%;">
- <span>|*NewsData*|</span>
- </p>
解决方法
你想要这样的东西吗?
- .marquee {
- margin: 0 auto;
- white-space: nowrap;
- overflow: hidden;
- position: absolute;
- color: #ffffff;
- background-color: #000000;
- font-family: Arial Rounded MT Bold;
- height: 90%;
- width: 90%;
- left: 5%;
- top: 5%;
- font-size: 7%;
- }
- .marquee .line__wrap {
- display: block;
- position: absolute;
- width: auto;
- left: 0;
- animation: marquee__wrap 2s linear infinite;
- font-size: 18px;
- }
- .marquee .line {
- position: relative;
- margin-left: -100%;
- animation: marquee 2s linear infinite;
- }
- @keyframes marquee__wrap {
- from {
- margin-left: 100%;
- }
- to {
- margin-left: 0%;
- }
- }
- @keyframes marquee {
- from {
- left: 100%;
- }
- to {
- left: 0%;
- }
- }
- <p id="PassengerNews_Scrollbar" class="microsoft marquee">
- <span class="line__wrap">
- <span class="line">|*NewsData*|</span>
- </span>
- <span class="line__wrap" style="top: 30px;">
- <span class="line">|*NewsData*|long long long long massage</span>
- </span>
- </p>