body.none { overflow-x: hidden; overflow-y: hidden; display: block; } .LookPicture *:before, .LookPicture *:after { position: absolute; display: inline-block; background-repeat: no-repeat; content: ""; } .LookPicture { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .LookPicture * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .LookPicture_Background { position: fixed; top: 0; left: 0; z-index: 19960924; width: 100%; height: 100%; background-color: #000; display: none !important; } .LookPicture { position: fixed; top: 0; left: 0; z-index: 19960925; width: 100%; height: 100%; display: none; } .LookPicture .Look_Close { position: absolute; right:20%; top: 20px; display: inline-block; background-repeat: no-repeat; width: 45px; height: 45px; cursor: pointer; z-index: 19960925; background: url('/image/album/ico_colke.png') no-repeat center; } .LookPicture .Look_Close{ transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .LookPicture .Look_Close:hover { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } .LookPicture .Look_Close:hover:before, .LookPicture .Look_Close:hover:after { box-shadow: 0 0 10px #66ccff; -moz-box-shadow: 0 0 10px #66ccff; -webkit-box-shadow: 0 0 10px #66ccff; } .LookPicture .Look_Close:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .LookPicture .Look_Close:after { -webkit-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); } .LookPicture .Look_img { display: none; position: absolute; max-width: 85%; max-height: 85%; top: 50%; left: 50%; z-index: 19960924; box-shadow: 0 0 20px #000; -moz-box-shadow: 0 0 20px #000; -webkit-box-shadow: 0 0 20px #000; border: 0; border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .LookPicture .Look_img:hover { box-shadow: 0 0 20px #000000; -moz-box-shadow: 0 0 20px #000000; -webkit-box-shadow: 0 0 20px #000000; } .LookPicture .Look_img.Look_Show { display: block; } .LookPicture .Look_before { position: absolute; display: inline-block; background-repeat: no-repeat; width: 45px; height: 70px; z-index: 19960926; left: 15%; top: 50%; margin-top: -35px; cursor: pointer; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .LookPicture .Look_before:before, .LookPicture .Look_before:after { left: 0; width: 40px; height: 3px; background-color: #fff; border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .LookPicture .Look_before:before { top: 50px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .LookPicture .Look_before:after { top: 23px; -webkit-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); } .LookPicture .Look_before:hover { left: 14.5%; } .LookPicture .Look_before:hover:before, .LookPicture .Look_before:hover:after { box-shadow: 0 0 20px #66ccff; -moz-box-shadow: 0 0 20px #66ccff; -webkit-box-shadow: 0 0 20px #66ccff; } .LookPicture .Look_next { position: absolute; display: inline-block; background-repeat: no-repeat; width: 45px; height: 70px; z-index: 19960926; right: 15%; top: 50%; margin-top: -35px; cursor: pointer; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .LookPicture .Look_next:before, .LookPicture .Look_next:after { left: 0; width: 40px; height: 3px; background-color: #fff; border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .LookPicture .Look_next:before { top: 50px; -webkit-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); } .LookPicture .Look_next:after { top: 23px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .LookPicture .Look_next:hover { right: 14.5%; } .LookPicture .Look_next:hover:before, .LookPicture .Look_next:hover:after { box-shadow: 0 0 20px #66ccff; -moz-box-shadow: 0 0 20px #66ccff; -webkit-box-shadow: 0 0 20px #66ccff; } .Look_Open { display: block !important; }