css部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 300px;
height: 400px;
margin:100px auto;
position: relative;/*相对定位*/
left:0px;
top:0px;
/*对象选择器 box-shadow:[投影方式] X轴偏移量 Y轴偏移量模糊半径 阴影半径 颜色*/
box-shadow: 5px -1px 20px dimgray;
}
div img{
width: 300px;
height: 400px;
}
div:hover{
left: 5px;
top: -10px;
transition: all 1s;/*transition属性的过渡*/
opacity:0.8;/*改变img等元素的透明度 数值在0-1间 0是完全透明 1是不透明*/
/*transform进行2D 3D间转换 scale(x,y) 对元素进行缩放 Y是一个可选参数,可以先填写一个参数 缩放宽高等比例缩放*/
transform:scale(1.02);
/*进行旋转 deg 角度*/
/*transform:rotate(100deg);*/
/*进行X Y轴倾斜 deg角度*/
/*transform:skew(1deg,2deg);*/
}
</style>
</head>
<body>
<div><img src="img/kouhong.jpg"></div>
</body>
</html>
效果图
