CSS——鼠标滑过放大/左移

最新推荐文章于 2024-06-01 17:33:11 发布

ansheng02

最新推荐文章于 2024-06-01 17:33:11 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： CSS样式放大左移

本文链接：https://blog.csdn.net/ansheng02/article/details/86715527

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

注：图片来源网络图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标滑过放大/左移</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.show-big,.show-left{
			height: 200px;
            width: 650px;
            margin: 0 auto;
		}
		.show-big ul,.show-left ul{
			width: 100%;
			height: 150px;
		}
		.show-big ul li,.show-left ul li{
			float: left;
            width: 100px;
            border: 1px solid #ff5400;
            padding: 4px;
            margin: 1%;
            cursor: pointer;
			transition: all 0.6s;
		}
		.show-big ul li img,.show-left ul li img{
			width: 100px;
		}
		.show-big ul li:hover{
			transform: scale(1.4);   
		}
		.show-left ul li{
			transition: 0.3s all ease;
		}
		.show-left ul li:hover{
			-webkit-transform: translate(-10px, 0); 
			-moz-transform: translate(-10px, 0); 
			transform: translate(-10px, 0); 
		}
	</style>
</head>
<body>
	<!-- 鼠标滑过图片放大 -->
	<div id="showBig" class="show-big">
		<ul>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
		</ul>
	</div>

	<!-- 鼠标滑过li左移 -->
	<div id="showLeft" class="show-left">
		<ul>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
			<li><img src="http://y.zdmimg.com/201611/23/58357c298f0586872.jpg_e600.jpg" alt=""></img></li>
		</ul>
	</div>
</body>
</html>

ansheng02

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS——鼠标滑过放大/左移

注：图片来源网络图片&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;鼠标滑过放大/左移&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫