body { display:flex; justify-content:center; position:relative; } .box { width:360px; height:320px; overflow:hidden; position:relative; } .main img { width:100%; } .close { width:12px; height:12px; position:absolute; top:10px; right:20px; cursor:pointer; transition:all .8s; display:flex; justify-content:center; align-items:center; z-index:10; } .close:hover { transform:rotateZ(180deg); } .close:hover > span { background-color:#049EF4; transition:all .8s; } .close > span { display:none; padding:1px; border-radius:4px; height:12px; background-color:#f5f5f5; position:absolute; } .close > span:nth-child(1) { transform:rotateZ(45deg); } .close > span:nth-child(2) { transform:rotateZ(-45deg); } .mask { display:none; background-color:rgba(0,0,0,.3); width:100vw; height:100vh; position:fixed; top:0; left:0; }
更新时间:2021-01-19 01:05:52
简易的图片放大功能