效果解密之一——循环图片探秘（新浪Qing首页轮换图）

本文链接：https://blog.youkuaiyun.com/debugingstudy/article/details/11178887

本文展示了如何利用CSS技巧实现5张图片的过渡效果，通过改变ul的margin-left属性来达到平滑的动画效果。关键在于最后一张图片的重复使用，实现了整个动画流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<ul style="width: 5400px; margin-left: -1800px;">		           
<li>	<a href="http://qing.blog.sina.com.cn/tag/车模" target="_blank">
		<div class="classicTagWrap">
			<div style="background:url(http://i3.sinaimg.cn/blog/2/2013/0524/U2594P1502T2D12F34DT20130808165322.jpg);height:360px;" class="classicTagInfo">
				<div class="classicTagPop">
					<div class="classicTagDetail">
						<p>人车一体成一道靓丽风景线</p>
					</div>
				</div>
			</div>
		</div>
	</a>
</li>
<li>
	<a href="http://qing.blog.sina.com.cn/tag/lomo" target="_blank">
		<div class="classicTagWrap">
			<div style="background:url(http://i0.sinaimg.cn/blog/2/2013/0524/U2594P1502T2D12F35DT20130808165322.jpg);height:360px;" class="classicTagInfo">
				<div class="classicTagPop">
					<div class="classicTagDetail">
						<p>我就喜欢lomo一下</p>
					</div>
				</div>
			</div>
		</div>
	</a>
</li>
<li>
	<a href="http://qing.blog.sina.com.cn/tag/校花" target="_blank">
		<div class="classicTagWrap">
			<div style="background:url(http://i3.sinaimg.cn/blog/2/2013/0524/U2594P1502T2D12F36DT20130718144547.jpg);height:360px;" class="classicTagInfo">
				<div class="classicTagPop">
					<div class="classicTagDetail">
						<p>你永远是校园中的焦点</p>
					</div>
				</div>
			</div>
		</div>
	</a>
</li>
<li>
	<a href="http://qing.blog.sina.com.cn/tag/咖啡" target="_blank">
		<div class="classicTagWrap">
			<div style="background:url(http://i0.sinaimg.cn/blog/2/2013/0524/U2594P1502T2D12F37DT20130718144547.jpg);height:360px;" class="classicTagInfo">
				<div class="classicTagPop">
					<div class="classicTagDetail">
						<p>下午茶时间不容错过</p>
					</div>
				</div>
			</div>
		</div>
	</a>
</li>
<li>
	<a href="http://qing.blog.sina.com.cn/tag/风景" target="_blank">
		<div class="classicTagWrap">
			<div style="background:url(http://i3.sinaimg.cn/blog/2/2013/0524/U2594P1502T2D12F38DT20130808165322.jpg);height:360px;" class="classicTagInfo">
				<div class="classicTagPop">
					<div class="classicTagDetail">
						<p>旅途中不容错过的美景</p>
					</div>
				</div>
			</div>
		</div>
	</a>
</li>
<!------------------重复第一张图片，这是关键-------------------><li>
	<a href="http://qing.blog.sina.com.cn/tag/车模" target="_blank">
		<div class="classicTagWrap">
			<div style="background:url(http://i3.sinaimg.cn/blog/2/2013/0524/U2594P1502T2D12F34DT20130808165322.jpg);height:360px;" class="classicTagInfo">
				<div class="classicTagPop">
					<div class="classicTagDetail">
						<p>人车一体成一道靓丽风景线</p>
					</div>
				</div>
			</div>
		</div>
	</a>
</li></ul>

效果：

http://qing.blog.sina.com.cn/fancy.html

解密：

实现5张图片过渡效果。思想：改变ul的margin-left的值。关键就在于最后的那张重复图片，实现过渡。