可点击的跑马灯
时间: 2023-09-28 20:09:54 浏览: 42
下面是一个可点击的跑马灯的示例代码:
HTML:
```html
<div class="marquee-container">
<div class="marquee">
<a href="#">This is a clickable marquee. It will scroll horizontally.</a>
</div>
</div>
```
CSS:
```css
.marquee-container {
position: relative;
height: 30px;
overflow: hidden;
}
.marquee {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
white-space: nowrap;
overflow: hidden;
}
.marquee a {
display: inline-block;
padding-right: 100%;
color: #fff;
text-decoration: none;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
```
JS:
```js
// optional: pause on hover
var marqueeContainer = document.querySelector('.marquee-container');
marqueeContainer.addEventListener('mouseover', function () {
this.querySelector('.marquee a').style.animationPlayState = 'paused';
});
marqueeContainer.addEventListener('mouseout', function () {
this.querySelector('.marquee a').style.animationPlayState = 'running';
});
```
此代码将创建一个可点击的跑马灯效果,将文本水平滚动,同时链接到指定的 URL。你可以自定义文本、颜色、速度、链接等以适应你的需求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)