[分享]css中字滚动点上去暂停

CSS中可以使用字滚动来展现一些重要信息，但是在某些情况下，需要暂停字滚动来让用户更好的阅读。下面是一份CSS代码，可以实现在鼠标悬停到滚动字上时暂停滚动。/ 定义滚动区域 / .scrollable...

CSS中可以使用字滚动来展现一些重要信息，但是在某些情况下，需要暂停字滚动来让用户更好的阅读。下面是一份CSS代码，可以实现在鼠标悬停到滚动字上时暂停滚动。

/* 定义滚动区域 */
.scrollable {
  overflow: hidden;
  white-space: nowrap;
}

/* 定义滚动速度 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 定义滚动字体样式 */
.scrollable p {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  animation: scroll 10s linear infinite;
  display: inline-block;
  padding-right: 100%;
}

/* 定义鼠标悬停样式 */
.scrollable:hover p {
  animation-play-state: paused;
} 

代码中使用了CSS的动画属性来让文字实现滚动效果。定义了一个名为scroll的动画，设置了空白字符的百分比，当百分比为100%时，文字又会从头开始滚动。

滚动区域的样式使用了overflow:hidden，white-space:nowrap等属性，让内容在一行中滚动，不换行。同时，每个滚动的p标签使用了animation属性，指定了之前定义的scroll动画，并且设置了无限循环。

最后，当鼠标悬停在滚动字上时，通过:hover伪类和animation-play-state属性实现了动画的暂停。