3行交叉方向轮播的合作商logo展示，第一行和第三行向右滚动，第二行向左滚动
![图片[1]-子比主题-合作商Logo轮播展示代码分享-分享吧论坛-我的板块-回忆博客](https://img.meituan.net/portalweb/68fd55dd6957aaffac9364445a7aea13145159.png)
<div class="container fluid-widget"><div class="mb20"> <div class="partner-logo-carousel-widget" id="plc-68fcd55eeca8e">
<!-- 头部标题 -->
<header class="plc-header text-center">
<h3 class="plc-title em12">合同品牌及共创者</h3>
</header>
<!-- Logo轮播区域 -->
<main class="plc-main">
<div class="plc-row">
<div class="plc-track plc-animate-right" id="plc-68fcd55eeca8e-row1">
<a href="https://www.ymsq.cn" class="plc-card card-default" title="云梦社区" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020165451398-e50b2022-579e-48c2-88cc-375b2d331beb.webp" alt="云梦社区">
</a>
<a href="https://www.kd.cn/" class="plc-card card-default" title="酷盾安全" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/08/20250819174534163-20250327113408579-image.webp" alt="酷盾安全">
</a>
<a href="https://www.zyvps.cn/" class="plc-card card-default" title="泽云服务器" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/08/20250819180233677-20250818220015812-image.png" alt="泽云服务器">
</a>
<a href="https://www.tucool.cn/" class="plc-card card-default" title="图库设计" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/08/20250819174515358-20250310125343936-图酷设计LOGO-01_animated.svg" alt="图库设计">
</a>
<a href="https://cloud.tencent.com/" class="plc-card card-default" title="腾讯云" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020170045172-logo.23996906.svg" alt="腾讯云">
</a>
<a href="https://blog.iosru.com/" class="plc-card card-default" title="如烟笔记" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020171920342-logo.svg" alt="如烟笔记">
</a>
<a href="https://www.ymsq.cn" class="plc-card card-default" title="云梦社区" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020165451398-e50b2022-579e-48c2-88cc-375b2d331beb.webp" alt="云梦社区">
</a>
<a href="https://www.kd.cn/" class="plc-card card-default" title="酷盾安全" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/08/20250819174534163-20250327113408579-image.webp" alt="酷盾安全">
</a>
<a href="https://www.zyvps.cn/" class="plc-card card-default" title="泽云服务器" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/08/20250819180233677-20250818220015812-image.png" alt="泽云服务器">
</a>
<a href="https://www.tucool.cn/" class="plc-card card-default" title="图库设计" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/08/20250819174515358-20250310125343936-图酷设计LOGO-01_animated.svg" alt="图库设计">
</a>
<a href="https://cloud.tencent.com/" class="plc-card card-default" title="腾讯云" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020170045172-logo.23996906.svg" alt="腾讯云">
</a>
<a href="https://blog.iosru.com/" class="plc-card card-default" title="如烟笔记" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020171920342-logo.svg" alt="如烟笔记">
</a>
</div>
</div>
<div class="plc-row">
<div class="plc-track plc-animate-left" id="plc-68fcd55eeca8e-row2">
<a href="https://www.zibll.com/pay-zibll?ref=33498" class="plc-card card-default" title="子比主题" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020170145943-20231025151225453-ZIBLL-LOGO-动画-白天.svg" alt="子比主题">
</a>
<a href="https://duai1.cn" class="plc-card card-default" title="独爱导航" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251016102402981-1759231983-独爱导航图标.webp" alt="独爱导航">
</a>
<a href="https://www.yulll.com" class="plc-card card-default" title="宇凌云界源码网" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020170812977-e0909a395e20251020170715-scaled.webp" alt="宇凌云界源码网">
</a>
<a href="https://www.cymao.cc/" class="plc-card card-default" title="创业猫" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020172805858-4F569093366C1825E1C9B91C32DBA6F7.webp" alt="创业猫">
</a>
<a href="https://www.zhiyanx.cn/" class="plc-card card-default" title="炙焰技术网" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020172913183-ff82fbcea820240929175300.webp" alt="炙焰技术网">
</a>
<a href="https://440my.com/" class="plc-card card-default" title="诺言资源网" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020200515783-20250709132706945-200X200.webp" alt="诺言资源网">
</a>
<a href="https://www.zibll.com/pay-zibll?ref=33498" class="plc-card card-default" title="子比主题" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020170145943-20231025151225453-ZIBLL-LOGO-动画-白天.svg" alt="子比主题">
</a>
<a href="https://duai1.cn" class="plc-card card-default" title="独爱导航" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251016102402981-1759231983-独爱导航图标.webp" alt="独爱导航">
</a>
<a href="https://www.yulll.com" class="plc-card card-default" title="宇凌云界源码网" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020170812977-e0909a395e20251020170715-scaled.webp" alt="宇凌云界源码网">
</a>
<a href="https://www.cymao.cc/" class="plc-card card-default" title="创业猫" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020172805858-4F569093366C1825E1C9B91C32DBA6F7.webp" alt="创业猫">
</a>
<a href="https://www.zhiyanx.cn/" class="plc-card card-default" title="炙焰技术网" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020172913183-ff82fbcea820240929175300.webp" alt="炙焰技术网">
</a>
<a href="https://440my.com/" class="plc-card card-default" title="诺言资源网" target="_blank" rel="noopener noreferrer">
<img src="https://www.scbkw.com/wp-content/uploads/2025/10/20251020200515783-20250709132706945-200X200.webp" alt="诺言资源网">
</a>
</div>
</div>
<div class="plc-row">
<div class="plc-track plc-animate-right" id="plc-68fcd55eeca8e-row3">
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
<div class="plc-card card-default" title="">
<img src="https://p1.meituan.net/csc/bab63466737471f17a744b764956e06351105.png" >
</div>
</div>
</div>
</main>
</div>
<style>
#plc-68fcd55eeca8e {
width: 100%;
overflow: hidden;
}
#plc-68fcd55eeca8e .plc-header {
padding: 1rem 0;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
#plc-68fcd55eeca8e .plc-header {
padding: 1.5rem 0;
margin-bottom: 1.5rem;
}
}
#plc-68fcd55eeca8e .plc-title {
font-weight: bold;
color: var(--key-color);
margin-bottom: 0.5rem;
line-height: 1.4;
}
#plc-68fcd55eeca8e .plc-subtitle {
color: var(--muted-2-color);
margin: 0;
line-height: 1.6;
}
#plc-68fcd55eeca8e .plc-main {
width: 100%;
padding: 0.5rem 0;
}
@media (min-width: 768px) {
#plc-68fcd55eeca8e .plc-main {
padding: 1rem 0;
}
}
#plc-68fcd55eeca8e .plc-row {
overflow: hidden;
margin-bottom: 1rem;
position: relative;
}
@media (min-width: 768px) {
#plc-68fcd55eeca8e .plc-row {
margin-bottom: 1.5rem;
}
}
#plc-68fcd55eeca8e .plc-track {
display: flex;
gap: 1rem;
}
@media (min-width: 768px) {
#plc-68fcd55eeca8e .plc-track {
gap: 2rem;
}
}
#plc-68fcd55eeca8e .plc-card {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--main-radius);
transition: box-shadow 0.3s, transform 0.3s, opacity 0.3s;
padding: 1rem;
width: 140px;
height: 90px;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
#plc-68fcd55eeca8e .plc-card {
padding: 1.5rem;
width: 200px;
height: 100px;
}
}
/* 卡片样式变体 */
#plc-68fcd55eeca8e .plc-card.card-default {
background: var(--main-bg-color);
box-shadow: 0 1px 3px var(--main-shadow);
}
#plc-68fcd55eeca8e .plc-card.card-theme {
background: var(--theme-color);
box-shadow: 0 1px 3px rgba(240, 68, 148, 0.2);
}
#plc-68fcd55eeca8e .plc-card.card-muted {
background: var(--muted-bg-color);
box-shadow: 0 1px 3px var(--main-shadow);
}
#plc-68fcd55eeca8e .plc-card.card-transparent {
background: transparent;
box-shadow: none;
}
#plc-68fcd55eeca8e .plc-card:hover {
box-shadow: 0 4px 12px var(--main-shadow);
transform: translateY(-3px);
}
#plc-68fcd55eeca8e .plc-card.card-transparent:hover {
box-shadow: 0 2px 8px var(--main-shadow);
background: var(--main-bg-color);
}
#plc-68fcd55eeca8e .plc-card img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s;
}
#plc-68fcd55eeca8e .plc-card:hover img {
transform: scale(1.05);
}
/* 动画 */
@keyframes plc-scroll-left-plc-68fcd55eeca8e {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes plc-scroll-right-plc-68fcd55eeca8e {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
#plc-68fcd55eeca8e .plc-animate-left {
animation: plc-scroll-left-plc-68fcd55eeca8e 20s linear infinite;
}
#plc-68fcd55eeca8e .plc-animate-right {
animation: plc-scroll-right-plc-68fcd55eeca8e 20s linear infinite;
}
/* 移动端加快动画速度 */
@media (max-width: 768px) {
#plc-68fcd55eeca8e .plc-animate-left {
animation: plc-scroll-left-plc-68fcd55eeca8e 13.2s linear infinite;
}
#plc-68fcd55eeca8e .plc-animate-right {
animation: plc-scroll-right-plc-68fcd55eeca8e 13.2s linear infinite;
}
}
/* 鼠标悬停时暂停动画 */
#plc-68fcd55eeca8e .plc-track:hover {
animation-play-state: paused;
}
/* 暗黑模式适配 */
.dark-theme #plc-68fcd55eeca8e .plc-card.card-default {
background: var(--main-bg-color);
}
.dark-theme #plc-68fcd55eeca8e .plc-card.card-muted {
background: var(--muted-bg-color);
}
</style>
</div></div>
没有回复内容