ul中li的无限轮播之css

/* 自定义动画 */
@keyframes leftMove{
	0% {
		margin-left: -5px;
	}

	20% {
		margin-left: -500px;
	}

	40% {
		margin-left: -1000px;
	}

	60% {
		margin-left: -1500px;
	}

	80% {
		margin-left: -2000px;
	}

	100% {
		margin-left: -2500px;
	}
}

.fdlian ul {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	position: relative;
	list-style: none;
	width: 6711px;
	left: 0px;
	/* 无限循环(infinite)动画 */
	/* linear 从始至终速度相同 */
	/* animation:动画名  动画时间 动画的速度曲线 动画的播放次数 */
	animation: leftMove 50s linear infinite;
}


.fdlian ul:hover {
	/* 鼠标移上去显示小手的形状 */
	cursor: pointer;
	/* 当鼠标覆盖动画停止 */
	animation-play-state: paused;
}
发布了56 篇原创文章 · 获赞 6 · 访问量 1875

猜你喜欢

转载自blog.csdn.net/qq_45832807/article/details/104260862
今日推荐