#real { /*点击弹出模态框的图片*/ margin:30px; width:250px; border-radius:6px; } #real:hover { opacity:0.6; } #mo { display:none; /*隐藏*/ width:100%; height:100%; position:fixed; overflow:auto; background-color:rgba(0,0,0,0.7); top:0px; left:0px; z-index:1; } #moimg { display:block; margin:25px auto; width:60%; max-width:750px; } #caption { text-align:center; margin:15px auto; width:60%; max-height:750px; font-size:20px; color:#ccc; } #moimg,#caption { -webkit-animation:first 1s; -o-animation:first 1s; animation:first 1s; } @keyframes first { from { transform:scale(0.1); } to { transform:scale(1); } }.close { font-size:40px; font-weight:bold; position:absolute; top:20px; right:14%; color:#f1f1f1; } .close:hover,.close:focus { color:#bbb; cursor:pointer; }
缓慢放大动画,可关闭