css部分代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <style type="text/css">
7 div{
8 width: 300px;
9 height: 400px;
10 margin:100px auto;
11 position: relative;/*相对定位*/
12 left:0px;
13 top:0px;
14
15 /*对象选择器 box-shadow:[投影方式] X轴偏移量 Y轴偏移量模糊半径 阴影半径 颜色*/
16 box-shadow: 5px -1px 20px dimgray;
17 }
18 div img{
19 width: 300px;
20 height: 400px;
21 }
22 div:hover{
23 left: 5px;
24 top: -10px;
25 transition: all 1s;/*transition属性的过渡*/
26 opacity:0.8;/*改变img等元素的透明度 数值在0-1间 0是完全透明 1是不透明*/
27
28 /*transform进行2D 3D间转换 scale(x,y) 对元素进行缩放 Y是一个可选参数,可以先填写一个参数 缩放宽高等比例缩放*/
29 transform:scale(1.02);
30 /*进行旋转 deg 角度*/
31 /*transform:rotate(100deg);*/
32 /*进行X Y轴倾斜 deg角度*/
33 /*transform:skew(1deg,2deg);*/
34 }
35 </style>
36 </head>
37 <body>
38 <div><img src="img/kouhong.jpg"></div>
39 </body>
40 </html>
效果图
时间： 2024-11-04 13:59:47