css - 从右到左选框

Question

下面是从左到右移动的代码，但我想从右到左移动。

$(".toggle").on("click", function() {
  $(".marquee").toggleClass("microsoft");
});

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee 28s linear infinite;
  color: #FFFFFF;
  font-size: 16px;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


/* Style the links */

.vanity {
  color: #333;
  text-align: center;
  font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.vanity a,
.microsoft a {
  color: #1570A6;
  transition: color .5s;
  text-decoration: none;
}

.vanity a:hover {
  color: #F65314;
}


/* Style toggle button */

.toggle {
  display: block;
  margin: 2em auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="microsoft marquee"><span>Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</span></p>

标签： cssanimation

Answer 1

我将填充放在右侧而不是左侧，并将动画关键帧转换调用中的 x 值从 -100% 更改为 0%，而不是相反。

$(".toggle").on("click", function() {
  $(".marquee").toggleClass("microsoft");
});

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-right: 100%;
  text-indent: 0;
  animation: marquee 28s linear infinite;
  color: #FFFFFF;
  font-size: 16px;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}


/* Style the links */

.vanity {
  color: #333;
  text-align: center;
  font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.vanity a,
.microsoft a {
  color: #1570A6;
  transition: color .5s;
  text-decoration: none;
}

.vanity a:hover {
  color: #F65314;
}


/* Style toggle button */

.toggle {
  display: block;
  margin: 2em auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="microsoft marquee"><span>Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</span></p>