css3+javascript实现模态框效果

最新推荐文章于 2025-05-26 23:15:29 发布

夕阳下美了剪影

最新推荐文章于 2025-05-26 23:15:29 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_38401285/article/details/79548539

本文通过一个具体的模态框案例介绍了如何使用CSS3的过渡transition和动画animation实现平滑的用户交互效果，包括图片透明度变化、模态框的淡入淡出及缩放效果。

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

这里用到css3的过渡transition(在点击图片之前，鼠标移入图片，0.7s改变了图片的透明度；进入模态效果，鼠标移入关闭按钮时，0.5s显示了关闭按钮背景颜色)和动画animation（给模态框加上动画，比例大小从0变到1）。

html代码：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
#img1{
display: block;
margin:100px auto 0;
border-radius: 5px;
cursor:pointer;
transition:0.7s;
/*css3过渡*/
}
#img1:hover{
opacity: 0.8;
}
/*modal样式*/
#modal{
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
z-index: 1;
display: none;
background-color: rgba(0,0,0,0.9);
padding-top: 100px;
animation:myanimation 0.5s;
-webkit-animation:myanimation 0.5s;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#close{
position: absolute;
right:35px;
top:15px;
color:#f1f1f1;
font-size: 40px;
font-weight: bold;
transition:0.5s;
}
#close:hover,#close:focus{
background-color: #bbb;
cursor: pointer;
}
/*增加动画animation*/
@keyframes myanimation{
from{transform:scale(0) }
to{transform:scale(1);}
}
@-webkit-keyframes myanimation{
form{-webkit-transform:scale(0.1);}
to{-webkit-transform:scale(1);}
}
#img2{
animation:myanimation 0.5s;
-webkit-animation:myanimation 0.5s;
}
</style>
</head>
<body>
<img src="6.jpg" alt="模态框" id="img1">
<div id="modal">
<span id="close">×</span>
<img id="img2" class="modal-content">
</div>
</body>

</html>

javascript代码: