css3 文字横向无缝滚动

悠悠 2022-10-25 01:24 344阅读 0赞

.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;
    			}