CSS中可以使用字滚动来展现一些重要信息,但是在某些情况下,需要暂停字滚动来让用户更好的阅读。下面是一份CSS代码,可以实现在鼠标悬停到滚动字上时暂停滚动。/* 定义滚动区域 */ .scrollab
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属性实现了动画的暂停。
粉丝
0
关注
0
收藏
0