css3轮播图

最新推荐文章于 2024-07-12 18:27:51 发布

jmin_coming

最新推荐文章于 2024-07-12 18:27:51 发布

阅读量529

点赞数 1

分类专栏： css3 文章标签：动画图片 css3

本文链接：https://blog.csdn.net/jian_xi/article/details/53428010

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

之前用纯css3实现的轮播图,最近翻出来看看,顺便也分享给大家,但是效果上没有js实现的那么流畅,纯粹就是扩展下知识点,真正在项目中实现的话还是用js实现的比较流畅一点,如各路大神有更好的css实现方法,不妨告诉一下晚辈,蟹蟹!下面是简单实现过程过程.

html:

<div class="banner">
	<ul>
		<li>
			<a href="#"><img src="images/bg5.jpg" width="700" height="300"/></a>
		</li>
		<li>
			<a href="#"><img src="images/bg4.jpg" width="700" height="300" /></a>
		</li>
		<li>
			<a href="#"><img src="images/bg3.jpg" width="700" height="300" /></a>
		</li>
		<li>
			<a href="#"><img src="images/bg5.jpg" width="700" height="300" /></a>
		</li>
		<li>
			<a href="#"><img src="images/bg3.jpg" width="700" height="300" /></a>
		</li>
	</ul>
</div>

CSS:

<style type="text/css">
	*{margin:0px;padding:0px;}
	body{background:#888}
	ul,li{list-style:none}
	.banner{
		width:845px;
		height:300px;
		margin:100px auto;
		box-shadow:0 0 10px rgba(0,0,0,.7);
		overflow:hidden;
	}
	.banner li{
		width:168px;
		float:left;
		border-left:1px solid #fff;
		transition:all 0.6s ease;
	}
	.banner ul:hover li{
		width:35px;
	}
	.banner ul li:hover{
		width:700px;
		transition:all 2s ease;
	}
</style>