2、给window添加鼠标移动事件，根据鼠标在浏览器中的坐标（clientX和clientY）修改父盒子的top和left，以达到移动镜面的效果。
3、给子盒子添加背景图（和body背景图一致），在window的鼠标移动事件中修改子盒子的样式——background-position，改变子盒子中的背景图在盒子中的显示位置，使背景图的显示与body一致。
4、再给子盒子添加缩放（transform:scale(2)），即可实现放大功能。
1、由于背景图无法设置透明度，所以使用body的伪元素，给伪元素添加背景图和opacity属性。
2、这时虽然给背景设置上了透明的，但却是发白的那种透明，要想变成暗沉的透明，只需要给body添加背景颜色就行。
3、background-position的使用，由于是要将背景的选中位置移动到盒子的中心，所以使用的是负值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 0
background-color: #000
margin: 0
}
body::after{
display: block
position: absolute
top: 0
left: 0
content: ''
width: 100%
height: 100%
background-image: url('伊芙琳.jpg')
background-position: 0px 0px
background-size: 100% auto
opacity: 0.1
}
.magnifier {
width: 300px
height: 300px
background-image: url('伊芙琳.jpg')
background-size: 1730px auto
background-position: 0px 0px
transform: scale(2)
margin: 0
position: relative
z-index: 100
}
.main {
width: 300px
height: 300px
border-radius: 50%
overflow: hidden
position: absolute
}
</style>
</head>
<body>
<div class="main">
<div class="magnifier"></div>
</div>
<script>
let flag = true
let magnifier = document.getElementsByClassName('magnifier')[0]
let main = document.getElementsByClassName('main')[0]
let boxLeft = 0
let boxTop = 0
window.onmousemove = (event) => {
if(!flag) return
setTimeout( ()=>{
flag = true
},50)
console.log(event.clientX, event.clientY)
if(event.clientX > 1590) {
event.clientX = 1590
}
boxLeft = event.clientX > 1590 ? '1440px' : event.clientX > 150 ? event.clientX - 150 + 'px':'0px'
boxTop = event.clientY > 720 ? '575px' : event.clientY > 150 ? event.clientY - 150 + 'px':'0px'
main.style.left = boxLeft
main.style.top = boxTop
// magnifier.style.backgroundPosition = '830px 570px'
magnifier.style.backgroundPosition = '-' + boxLeft + ' ' + '-' + boxTop
flag = false
}
</script>
</body>
</html>
1、首先打开css视频制作播放软件，进入主界面。2、其次通过百分比设置宽度内容，根据宽高比16:9，计算出高度的百分比数值，设置内边距为高度的数值。
3、最后在点击设置找到内容放大缩小点击保真选项保存推出即可不失真。
源码如下
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>CSS3鼠标滑过图片放大特效DEMO演示</title>
<style>
html{font-family:sans-serif-ms-text-size-adjust:100%-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-blockvertical-align:baseline}audio:not([controls]){display:noneheight:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2emmargin:0.67em 0}mark{background:#ff0color:#000}small{font-size:80%}sub,sup{font-size:75%line-height:0position:relativevertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-boxbox-sizing:content-boxheight:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospacefont-size:1em}button,input,optgroup,select,textarea{color:inheritfont:inheritmargin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:buttoncursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-boxbox-sizing:border-boxpadding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield-moz-box-sizing:content-boxbox-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0margin:0 2pxpadding:0.35em 0.625em 0.75em}legend{border:0padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapseborder-spacing:0}td,th{padding:0}
</style>
<style>
@import url("http://fonts.googleapis.com/css?family=Lato")
* {
margin: 0
padding: 0
box-sizing: border-box
}
body {
font: 14px/1 Lato, sans-serif
color: #555
background: #eee
}
.gallery {
width: 790px
margin: 30px auto
padding: 5px
background: #333
}
.gallery > div {
position: relative
float: left
padding: 5px
}
.gallery > div > img {
width: 250px
transition: .1s transform
transform: translateZ(0)
/* hack */
}
.gallery > div:hover {
z-index: 1
}
.gallery > div:hover > img {
transform: scale(1.5, 1.5)
transition: .3s transform
}
.cf:before, .cf:after {
display: table
content: ""
line-height: 0
}
.cf:after {
clear: both
}
h1 {
margin: 40px 0
font-size: 24px
text-align: center
text-transform: uppercase
}
footer {
margin: 80px 0
text-align: center
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div class="gallery cf">
<div>
<img src="landscape-test-1_1x.jpg" />
</div>
<div>
<img src="iceberg_1x.jpg" />
</div>
<div>
<img src="igloo-800_1x.jpg" />
</div>
<div>
<img src="trees_1x.jpg" />
</div>
<div>
<img src="space_1x.jpg" />
</div>
<div>
<img src="render1_1x.jpg" />
</div>
</div>
<div style="text-align:centerclear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
