滚动显示的LOGO

原创已于 2025-06-27 14:14:50 修改 · 585 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-21 17:45:06 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动显示的LOGO</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}

.logo-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 100px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.logo-scroll {
display: flex;
position: absolute;
left: 0;
top: 20px;
animation: scroll 20s linear infinite;
}

.logo-item {
margin: 0 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo-item img {
height: 60px;
width: auto;
object-fit: contain;
}

.logo-item span {
margin-top: 5px;
font-size: 12px;
color: #666;
}

@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}

.footer {
text-align: center;
margin-top: 30px;
color: #888;
font-size: 14px;
}

/* 插入的网址样式 */
.inserted-url {
color: #1a73e8;
text-decoration: none;
font-weight: bold;
}

.inserted-url:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>品牌合作伙伴</h1>

<div class="logo-container">
<div class="logo-scroll">

<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO1" alt="LOGO 1">
<span>合作伙伴1</span>
</div>
<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO2" alt="LOGO 2">
<span>合作伙伴2</span>
</div>
<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO3" alt="LOGO 3">
<span>合作伙伴3</span>
</div>
<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO4" alt="LOGO 4">
<span>合作伙伴4</span>
</div>
<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO5" alt="LOGO 5">
<span>合作伙伴5</span>
</div>


<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO1" alt="LOGO 1">
<span>合作伙伴1</span>
</div>
<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO2" alt="LOGO 2">
<span>合作伙伴2</span>
</div>
<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO3" alt="LOGO 3">
<span>合作伙伴3</span>
</div>
<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO4" alt="LOGO 4">
<span>合作伙伴4</span>
</div>
<div class="logo-item">
<img src="https://via.placeholder.com/150x60?text=LOGO5" alt="LOGO 5">
<span>合作伙伴5</span>
</div>
</div>
</div>

<div class="footer">

</div>

<script>
// 确保滚动动画在页面加载后立即开始
document.addEventListener('DOMContentLoaded', function() {
const scrollContainer = document.querySelector('.logo-scroll');
scrollContainer.style.animation = 'scroll 20s linear infinite';
});
</script>
</body>
</html>