html – 用于可变消息长度的CSS Marquee

前端之家收集整理的这篇文章主要介绍了html – 用于可变消息长度的CSS Marquee前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找marquee标签替代品,并找到了如何通过CSS进行此操作.但是我使用的消息是可变长度的,所以可以选择将’45s’属性设置为100%,这样无论消息有多长或多短,消息都会显示所有消息和循环消息显示后再次显示
  1. .marquee {
  2. margin: 0 auto;
  3. white-space: nowrap;
  4. overflow: hidden;
  5. position: absolute;
  6. color: #ffffff;
  7. background-color: #000000;
  8. font-family: Arial Rounded MT Bold;
  9. }
  10.  
  11. .marquee span {
  12. display: inline-block;
  13. padding-left: 100%; /* show the marquee just outside the paragraph */
  14. animation: marquee 45s linear infinite;
  15. }
  16.  
  17.  
  18. @keyframes marquee {
  19. from { text-indent: 0%}
  20. to { text-indent: -150% }
  21. }
  1. <p id="PassengerNews_Scrollbar" class="microsoft marquee" style="height: 95%; width: 90%;left: 5%;top: 2%;font-size: 7%;">
  2. <span>|*NewsData*|</span>
  3. </p>

解决方法

你想要这样的东西吗?
  1. .marquee {
  2. margin: 0 auto;
  3. white-space: nowrap;
  4. overflow: hidden;
  5. position: absolute;
  6. color: #ffffff;
  7. background-color: #000000;
  8. font-family: Arial Rounded MT Bold;
  9. height: 90%;
  10. width: 90%;
  11. left: 5%;
  12. top: 5%;
  13. font-size: 7%;
  14. }
  15. .marquee .line__wrap {
  16. display: block;
  17. position: absolute;
  18. width: auto;
  19. left: 0;
  20. animation: marquee__wrap 2s linear infinite;
  21. font-size: 18px;
  22. }
  23. .marquee .line {
  24. position: relative;
  25. margin-left: -100%;
  26. animation: marquee 2s linear infinite;
  27. }
  28. @keyframes marquee__wrap {
  29. from {
  30. margin-left: 100%;
  31. }
  32. to {
  33. margin-left: 0%;
  34. }
  35. }
  36. @keyframes marquee {
  37. from {
  38. left: 100%;
  39. }
  40. to {
  41. left: 0%;
  42. }
  43. }
  1. <p id="PassengerNews_Scrollbar" class="microsoft marquee">
  2. <span class="line__wrap">
  3. <span class="line">|*NewsData*|</span>
  4. </span>
  5. <span class="line__wrap" style="top: 30px;">
  6. <span class="line">|*NewsData*|long long long long massage</span>
  7. </span>
  8. </p>

猜你在找的HTML相关文章