css3 文字横向无缝滚动

微信小程序 同时被 3 个专栏收录
48 篇文章 0 订阅
31 篇文章 0 订阅
<div class="notice-container">
			<div class="header-notice-marquee" id="notice-marquee">
				<div class="header-marquee-item1 flex">
					<div>111111111111111111111111111</div>
					<div>222222222222222222222222222</div>
				</div>
			</div>
		</div>
.notice-container {
				width: 300px;
				border: 1px solid #ededed;
				padding: 0 10px;
				align-items: center;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				flex: 1;
			}

			.header-notice-marquee {
				white-space: nowrap;
				overflow: hidden;
				position: relative;
				width: 100%;
				height: 20px;
				line-height: 20px;
			}

			.notice-container .header-marquee-item1 {
				margin: 0 10px;
				position: absolute;
				left: 0;
				animation-name: marquee1;
				animation-duration: 10s;
				animation-timing-function: linear;
				animation-delay: 0;
				animation-iteration-count: infinite;
				animation-direction: normal;
			}

			.notice-container .header-marquee-item2 {
				margin: 0 10px;
				position: absolute;
				left: 0;
				animation-name: marquee1;
				animation-duration: 10s;
				animation-timing-function: linear;
				animation-delay: 0;
				animation-iteration-count: infinite;
				animation-direction: normal;
			}

			.notice-container .header-notice-marquee:hover {
				animation-play-state: paused;
			}

			.notice-container .header-notice-marquee .header-marquee-item {
				position: absolute;
				top: 0;
				left: 0;
				white-space: nowrap;
			}

			@keyframes marquee1 {
				0% {
					left: 0;
				}

				100% {
					left: -100%;
				}
			}

			@keyframes marquee2 {
				0% {
					left: 100%;
				}

				100% {
					left: 0%;
				}
			}

			.flex {
				display: flex;
			}

 

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值