html中图片放大镜效果图,HTML5使用不同精度的图片来实现图像放大镜效果

CSS

语言&＃xff1a;

CSSSCSS

确定

body {

background-color: #212119;

margin: 0;

}

#selector {

border: 5px solid #aaa;

padding: 3px 10px;

margin-right: 20px;

margin-top: 20px;

position: absolute;

right: 0;

z-index: 100;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 0 0 5px 0 #000;

-webkit-box-shadow: 0 0 5px 0 #000;

box-shadow: 0 0 5px 0 #000;

}

.wrapper {

height: 679px;

position: relative;

width: 1000px;

}

.outer {

border: 5px solid #aaa;

height: 200px;

margin-left: 30px;

margin-top: 30px;

position: absolute;

width: 200px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

-moz-box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.5);

box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.5);

}

.large {

background: url("http://bryanjones.us/sites/default/files/nebula2.jpg") no-repeat #212119;

display: none;

}

.medium {

background: url("http://bryanjones.us/sites/default/files/nebula2x3.jpg") no-repeat #212119;

display: none;

}

.small {

background: url("http://bryanjones.us/sites/default/files/nebula2x2.jpg") no-repeat #212119;

display: none;

}

.text {

background-color: #555;

border: 2px solid #aaa;

color: #fff;

display: none;

font-weight: bold;

height: 90px;

margin-left: 30px;

margin-top: 30px;

padding: 8px;

position: absolute;

width: 90px;

-moz-border-radius: 30% 0 0 0;

-webkit-border-radius: 30%;

border-radius: 30% 0 0 0;

}

.glass {

background-color: transparent;

cursor: none;

height: inherit;

position: relative;

width: 100%;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

-moz-box-shadow: inset -20px 0 40px 0px rgba(255, 255, 255, 0.25);

-webkit-box-shadow: inset -20px 0 40px 0px rgba(255, 255, 255, 0.25);

box-shadow: inset -20px 0 40px 0px rgba(255, 255, 255, 0.25);

-moz-transform: rotateZ(-30deg);

-ms-transform: rotateZ(-30deg);

-webkit-transform: rotateZ(-30deg);

transform: rotateZ(-30deg);

}