css3实现小米商城鼠标移动图片上浮阴影效果
今天在编程爱好者编码库看见一个好玩的程序,代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1, user-scalable=no"
>
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
>
<meta name=
"renderer"
content=
"webkit"
>
<title>CSS
3
实现小米商城鼠标移动图片上浮阴影效果</title>
<style>
*{
margin
:
0
;
padding
:
0
;
font-family
:
'微软雅黑'
,
'Helvetica Neue'
,
Arial
,
sans-serif
}
body{
background-color
:
#f5f5f5
;
text-align
:
center
;
}
.image-shadow{
position
:
relative
;
/*设置为相对*/
margin
:
60px
auto
;
z-index
:
1
;
width
:
294px
;
height
:
413px
;
background
:
#fff
;
-webkit-transition:
all
.
2
s linear;
/*渐变效果*/
transition:
all
.
2
s linear;
}
.image-shadow:hover{
z-index
:
2
;
/*设置在顶层显示*/
-webkit-box-shadow:
0
15px
30px
rgba(
0
,
0
,
0
,
0.1
);
/*添加阴影*/
box-shadow:
0
15px
30px
rgba(
0
,
0
,
0
,
0.1
);
-webkit-transform: translate
3
d(
0
,
-2px
,
0
);
/*向上浮动*/
transform: translate
3
d(
0
,
-2px
,
0
);
}
</style>
</head>
<body>
<h
3
style=
"margin: 60px 0 20px 0; text-align: center"
>CSS
3
实现小米商城鼠标移动图片上浮阴影效果</h
3
>
<div class=
"image-shadow"
>
</div>
</body>
</html>