文章
文章用户商店文档快讯圈子问答网址导航

HTML滚动方块代码

HTML滚动方块代码

从右往左的动画~

HTML代码：

<div class="wrapper-logo">
	<div class="marquee">
		<div class="marquee__group">
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
		</div>
		<div class="marquee__group">
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
		</div>
	</div>
	<div class="marquee">
		<div class="marquee__group">
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
		</div>
		<div class="marquee__group">
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
		</div>
	</div>
	<div class="marquee">
		<div class="marquee__group">
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
		</div>
		<div class="marquee__group">
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
		</div>
	</div>
	<div class="marquee">
		<div class="marquee__group">
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
		</div>
		<div class="marquee__group">
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
			<div class="item-logo">
				<img src="//img.ahap.cn/files/2024/09/2024091100464660.jpg">
			</div>
		</div>
	</div>
</div>

CSS代码：

    .wrapper-logo{
        --logo-width: 200px;
        --logo-height: 100px;
        --gap: calc(var(--logo-width) / 14);
        --duration: 60s;
        --scroll-start: 0;
        --scroll-end: calc(-100% - var(--gap));
        display: flex;
        flex-direction: column;
        gap: calc(200px / 14);
        margin: auto;
        max-width: 100vw
    }
    
.marquee {
    display: flex;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    gap: var(--gap);
    -webkit-mask-image: linear-gradient(to right,#0000,#000 20%,#000 80%,#0000);
    mask-image: linear-gradient(to right,#0000,#000 20%,#000 80%,#0000)
}

.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scrollLeft-ffa1cefb var(--duration) linear infinite
}

.item-logo {
    width: var(--logo-width);
    height: var(--logo-height);
    background-color: #f2f2f2;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center
}

@keyframes scrollLeft-ffa1cefb {
    0% {
        transform: translate(var(--scroll-start))
    }

    to {
        transform: translate(var(--scroll-end))
    }
}
.wrapper-logo .item-logo img{
    width: 60px;
    height: 60px;
}

.wrapper-logo .marquee:nth-child(2n) {
    margin-left: calc(var(--logo-width) / -2)
}
一、本站上的部份代码及教程来源于互联网，仅供网友学习交流。如有侵权，无意侵害您的权益，请发送邮件至zhangshen#ahap.cn或点击右侧 联系我们，我们将尽快处理。
二、请勿将购买的资源教程转载或分享与他人！

给TA充电
共{{data.count}}人
人已充电
b2主题美化默认

7B2Pro主题修改分类页面标题

2024-7-16 16:03:01

默认

如何让网站快速被搜索引擎蜘蛛抓取与收录

2024-12-1 17:10:47

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • 微信扫一扫关注公众号

返回顶部