图片的摸态框

来源：互联网发布：淘宝客佣金怎么领取编辑：程序博客网时间：2024/06/05 03:52

重点：在于弹出框的动画

代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图片的模态框</title><style type="text/css">.img1{cursor: pointer;border-radius: 5px;transition: 0.3s;}.img1:hover{opacity: 0.7;}.modal{display: none; position:fixed;z-index: 1;left:0;top:0;width: 100%;height: 100%;background: rgba(0,0,0,0.9);padding-top: 100px; text-align: center;}.modal img{max-width: 700px;width: 80%;margin: 0 auto;}.modal .close{position:absolute;top:15px;right: 35px;font-size: 40px;color: #fff;transition:0.3s; cursor: pointer;}.modal .close:hover,.modal .close:focus{color: #bbb;}.modal-body{animation-name: zoom;animation-duration: 0.6s;}@keyframes zoom{from{transform: scale(0.1);}to{transition: scale(1);}}</style></head><body><img src="paris.jpg"  alt="图片" class="img1" id='img1'><div class="modal" id='myModal'><span class="close" id='close'>×</span><img class="modal-body" src='paris.jpg'></img><p>Northern Lights, Norway</p></div><script type="text/javascript">document.getElementById('img1').onclick=function() {document.getElementById('myModal').style.display='block';}document.getElementById('close').onclick=function(){document.getElementById('myModal').style.display='none';}</script></body></html>

0 0