鼠标经过图片时，飞入另外一张图片。

最新推荐文章于 2025-07-22 00:16:16 发布

weixin_30624825

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/leaflife/p/6792057.html

本文介绍了一种使用HTML和CSS实现的图像悬停效果，通过阴影和过渡动画增强用户体验。具体包括如何设置按钮样式、图像定位及响应鼠标悬停的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

</div>

</body>
</html>

css.css样式文件：

@charset "utf-8";
/* CSS Document */

.btn01 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.btn01 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.btn01 .ovrly {
background-image:url(../img/rolling2.png);
height: 100%;
left: 0;
top: -100%;
width: 100%;
position: absolute;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.btn01:hover .ovrly {
top: 0;

}

.btn03 {
height:183px;
width:250px;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.btn03 img {
position: relative;
height:183px;
width:250px;
top: 0;
left: 0;
}
.btn03 .ovrly {
background-image:url(../img/rolling2.png);
height: 100%;
left: 0;
top: 100%;
width:250px;
position: absolute;
-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.btn03:hover .ovrly {
top: 0;
}

.dtl04 {
height:183px;
width:250px;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.dtl04 img {
position: relative;
height:183px;
width:250px;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.dtl04 .dtl {
position: absolute;
background-image:url(../img/rolling2.png);
height:183px;
width:200px;
top: 70%;
padding: 0 15px 0 15px;
left: 0;
opacity: 0;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s 0.15s;
-moz-transition: all 0.3s 0.15s;
-o-transition: all 0.3s 0.15s;
transition: all 0.3s 0.15s;
}