首页 > 代码库 > css3实现小米商城鼠标移动图片上浮阴影效果
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"
>
<img src=http://www.mamicode.com/
"http://i1.piimg.com/1949/b5f249822d378888.png"
>
</div>
</body>
</html>
css3实现小米商城鼠标移动图片上浮阴影效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。