友情链接走马灯代码（网页友情链接轮播特效实现）
一、HTML代码实现
```html
二、CSS样式设置
```css
.carousel {
width: 100%;
overflow: hidden;
position: relative;
.carousel ul {
list-style: none;
width: 300%;
padding: 0;
margin: 0;
position: absolute;
left: 0;
animation: scroll 10s infinite linear;
.carousel li {
float: left;
width: 33.33%;
text-align: center;
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
三、JavaScript脚本添加
```javascript
var carousel = document.querySelector('.carousel');
var ul = document.querySelector('.carousel ul');
var lis = document.querySelectorAll('.carousel li');
carousel.onmouseover = function() {
ul.style.animationPlayState = 'paused';
carousel.onmouseout = function() {
ul.style.animationPlayState = 'running';
lis.forEach(function(li) {
li.onclick = function() {
var link = li.querySelector('a').getAttribute('href');
window.open(link, '_blank');
}
四、应用场景
推荐与本文相关的好文：
