html文字轮播代码 当鼠标触碰时可以暂停
时间: 2023-08-13 09:04:33 浏览: 50
以下是一个可以鼠标触碰时暂停的HTML文字轮播代码,你可以根据自己的需求进行修改和美化:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字轮播</title>
<style>
/* 轮播容器样式 */
.slider {
width: 300px;
height: 50px;
overflow: hidden;
border: 1px solid #ccc;
}
/* 轮播内容样式 */
.slider-content {
width: 3000px;
height: 50px;
white-space: nowrap;
position: relative;
left: 0;
animation: slide 10s linear infinite;
}
/* 文字样式 */
.slider-content span {
display: inline-block;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
/* 动画效果 */
@keyframes slide {
0% { left: 0; }
100% { left: -2700px; }
}
/* 鼠标悬停样式 */
.slider:hover .slider-content {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-content">
<span>第一条消息</span>
<span>第二条消息</span>
<span>第三条消息</span>
<span>第四条消息</span>
<span>第五条消息</span>
<span>第六条消息</span>
<span>第七条消息</span>
<span>第八条消息</span>
<span>第九条消息</span>
</div>
</div>
</body>
</html>
```
该代码与前一个代码的区别在于添加了一个:hover伪类样式。当鼠标悬停在轮播容器上时,将轮播动画的播放状态设置为暂停,离开时又恢复为播放状态。这样就可以实现鼠标触碰时暂停的效果了。