html5使鼠标移动上去页面上的图片向左移动

在这里插入代码片<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 665px;
				margin: 0 auto;
				position: relative;
				border: 1px solid #CCCCCC;
				border-bottom: 1px solid transparent;
				
			}
			.box .left{
				width: 225px;
				height: 300px;
				padding-left: 20px;
				box-sizing: border-box;
				border-bottom: 1px solid #CCC;
			}
			.box .right{
				width: 440px;
				height: 300px;
				position: absolute;
				right: 0;
				top: 0;
			}
			h1,p{
				margin: 0;
			}
			.left h1{
				font-size: 16px;
				padding-top: 50px;
			}
			.left p{
				font-size: 16px;
				margin: 20px 0px;
			}
			.left img{
				margin-top: 40px;
			}
			
			ul{
				list-style: none;
				padding: 0;
				margin: 0;
			}
			ul li{
				float: left;
				width: 220px;
				height: 150px;
				box-sizing: border-box;
				border-left: 1px solid #CCCCCC;
				border-bottom: 1px solid #CCCCCC;
			}
				
			.text,.img{
				float: left;
			}
			.text h1{
				font-size: 14px;
				margin: 10px 0;
			}
			.text p{
				font-size: 12px;
			}
			.text{
				margin-left: 10px;
				margin-top: 10px;
			}
			.img{
				margin-top: 40px;
				transform: translateX(20px);
				transition: transform 0.5s ease-out;
			}
			li:hover .img{
				transform: translateX(10px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">
				<h1>超级信用卡</h1>
				<p>线上线下课累计彩贝积分</p>
				<img src="images/1.bmp" >
			</div>
			<div class="right">
				<ul>
					<li>
						<div class="text">
							<h1>彩贝抢霸</h1>
							<p>每天10点更新</p>
						</div>
						<div class="img">
							<img src="images/2.bmp" >
						</div>
					</li>
					<li>
						<div class="text">
							<h1>彩贝抢霸</h1>
							<p>每天10点更新</p>
						</div>
						<div class="img">
							<img src="images/2.bmp" >
						</div>
					</li>
					<li>
						<div class="text">
							<h1>彩贝抢霸</h1>
							<p>每天10点更新</p>
						</div>
						<div class="img">
							<img src="images/2.bmp" >
						</div>
					</li>
					<li>
						<div class="text">
							<h1>彩贝抢霸</h1>
							<p>每天10点更新</p>
						</div>
						<div class="img">
							<img src="images/2.bmp" >
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

使鼠标移动上去页面上的图片向左移动

已标记关键词 清除标记
相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本课程内容包含讲解<span>解读Nginx的基础知识,</span><span>解读Nginx的核心知识、带领学员进行</span>高并发环境下的Nginx性能优化实战,让学生能够快速将所学融合到企业应用中。 </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><br /> </b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"><span id="__kindeditor_bookmark_start_21__"></span></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a>,播放页面右侧点击课件进行资料打包下载 </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页