css滚动字幕鼠标悬停

CSS滚动字幕是一个很好的方式来向网页中添加动态文本。当加入鼠标悬停的事件时，可以让效果更加生动有趣。

.scroller {
white-space: nowrap;
overflow: hidden;
animation: scroll 10s linear infinite;
}
.scroller:hover {
animation-play-state: paused;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

首先，我们创建一个父容器并为其指定一个无换行的文本流。这个容器的宽度可以设置为适合您的文本所需的宽度。现在，我们需要为这个容器添加滚动属性，这可以通过 CSS 动画来实现。

创建一个名为“scroll”的键帧并在其中将 transform 属性设置为 translateX(-100%)，将我们的滚动文字放到父容器的左侧。然后在父容器上设置 animation 属性以使动画生效。

将 animation 属性设置为 scroll，持续时间设置为 10 秒，线性运动模式，无限重复动画。

最后，我们需要添加一个鼠标悬停事件来暂停滚动动画。这可以通过给父容器添加:hover伪类并设置animation-play-state为 paused 来实现。

 New CSS Feature:  CSS Scroll Snap  is now available in Google Chrome!

      
查看更多关于css滚动字幕鼠标悬停的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did221976