/*图片墙设置*/ body{ margin:0px; padding:0px; } body>div{ position:relative; width:100%; height:100%; overflow: hidden; padding:0px; margin:0 auto; } body>div:nth-of-type(1){ background: url(https://acg.ccoyun.cn/man/api.php) no-repeat; position:absolute; } img{ background:rgba(255,255,255,0.7); padding:10px; } div>img:nth-of-type(1){ -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); position:absolute; left:-80px; z-index:5; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(2){ -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); position:absolute; left:50px; top:150px; z-index:4; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(3){ -webkit-transform: rotate(-50deg); -moz-transform: rotate(-50deg); -ms-transform: rotate(-50deg); -o-transform: rotate(-50deg); transform: rotate(-50deg); position:absolute; left:-140px; top:300px; z-index:2; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(4){ -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); position:absolute; left:-30px; top:400px; z-index:3; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(5){ -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); position:absolute; left:-30px; top:600px; z-index:2; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(6){ -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); position:absolute; left:260px; z-index:2; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(7){ -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); position:absolute; left:330px; top:160px; z-index:4; border-radius:40px; opacity:0.9; filter:alpha(opacity=80); } div>img:nth-of-type(8){ -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -ms-transform: rotate(-12deg); -o-transform: rotate(-12deg); transform: rotate(-12deg); position:absolute; left:500px; top:-150px; z-index:2; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(9){ -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); position:absolute; left:850px; top:-60px; z-index:4; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(10){ -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); position:absolute; left:1200px; top:700px; z-index:4; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(11){ -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -ms-transform: rotate(-40deg); -o-transform: rotate(-40deg); transform: rotate(-40deg); position:absolute; left:800px; top:450px; z-index:4; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:nth-of-type(12){ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); position:absolute; left:400px; top:600px; z-index:1; border-radius:40px; opacity:0.8; filter:alpha(opacity=80); } div>img:hover{ -webkit-transform:rotate(0) scale(1.1); -moz-transform:rotate(0) scale(1.1); -ms-transform:rotate(0) scale(1.1); -o-transform:rotate(0) scale(1.1); transform:rotate(0) scale(1.1); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); } div>img:nth-of-type(1):hover{ -webkit-transform:rotate(0) scale(1.1) translate(80px); -moz-transform:rotate(0) scale(1.1) translate(80px); -ms-transform:rotate(0) scale(1.1) translate(80px); -o-transform:rotate(0) scale(1.1) translate(80px); transform:rotate(0) scale(1.1) translate(80px); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); } div>img:nth-of-type(3):hover{ -webkit-transform:rotate(0) scale(1.1) translate(140px); -moz-transform:rotate(0) scale(1.1) translate(140px); -ms-transform:rotate(0) scale(1.1) translate(140px); -o-transform:rotate(0) scale(1.1) translate(140px); transform:rotate(0) scale(1.1) translate(140px); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); } div>img:nth-of-type(4):hover{ -webkit-transform:rotate(0) scale(1.1) translate(30px); -moz-transform:rotate(0) scale(1.1) translate(30px); -ms-transform:rotate(0) scale(1.1) translate(30px); -o-transform:rotate(0) scale(1.1) translate(30px); transform:rotate(0) scale(1.1) translate(30px); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); } div>img:nth-of-type(5):hover{ -webkit-transform:rotate(0) scale(1.1) translate(30px,-100px); -moz-transform:rotate(0) scale(1.1) translate(30px,-100px); -ms-transform:rotate(0) scale(1.1) translate(30px,-100px); -o-transform:rotate(0) scale(1.1) translate(30px,-100px); transform:rotate(0) scale(1.1) translate(30px,-100px); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); } div>img:nth-of-type(8):hover{ -webkit-transform:rotate(0) scale(1.1) translate(0px,150px); -moz-transform:rotate(0) scale(1.1) translate(0px,150px); -ms-transform:rotate(0) scale(1.1) translate(0px,150px); -o-transform:rotate(0) scale(1.1) translate(0px,150px); transform:rotate(0) scale(1.1) translate(0px,150px); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); } div>img:nth-of-type(9):hover{ -webkit-transform:rotate(0) scale(1.1) translate(-180px,60px); -moz-transform:rotate(0) scale(1.1) translate(-180px,60px); -ms-transform:rotate(0) scale(1.1) translate(-180px,60px); -o-transform:rotate(0) scale(1.1) translate(-180px,60px); transform:rotate(0) scale(1.1) translate(-180px,60px); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); } div>img:nth-of-type(10):hover{ -webkit-transform:rotate(0) scale(1.1) translate(-220px,-150px); -moz-transform:rotate(0) scale(1.1) translate(-220px,-150px); -ms-transform:rotate(0) scale(1.1) translate(-220px,-150px); -o-transform:rotate(0) scale(1.1) translate(-220px,150px); transform:rotate(0) scale(1.1) translate(-220px,-150px); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); } div>img:nth-of-type(11):hover{ -webkit-transform:rotate(0) scale(1.1) translate(-55px,0px); -moz-transform:rotate(0) scale(1.1) translate(-55px,0px); -ms-transform:rotate(0) scale(1.1) translate(-55px,0px); -o-transform:rotate(0) scale(1.1) translate(-55px,0px); transform:rotate(0) scale(1.1) translate(-55px,0px); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); } div>img:nth-of-type(12):hover{ -webkit-transform:rotate(0) scale(1.1) translate(0px,-130px); -moz-transform:rotate(0) scale(1.1) translate(0px,-130px); -ms-transform:rotate(0) scale(1.1) translate(0px,-130px); -o-transform:rotate(0) scale(1.1) translate(0px,-130px); transform:rotate(0) scale(1.1) translate(0px,-130px); z-index:10; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:1; filter:alpha(opacity=1); }