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
/6
打开编辑器。
2
/6
创建html文档。
3
/6
创建css文档。
4
/6
添加动画。
5
/6
加上旋转角度就会开始旋转。
6
/6
完善一下时间即可完成。
1、新建html文档。
2、书写hmtl代码。
<div class="container">
<div id="search">
<label for="search">点击查看效果（<a href="#" target="_blank">11111111111</a>）:</label>
<input type="text" name="q">
<input class="button" type="submit" value="Search">
</div>
</div>
3、书写css代码。
<style>
body { background-color: #f1f1f1margin: 0}
body, input, button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif}
.container { margin: 30px auto 40px autowidth: 800pxtext-align: center}
a { color: #4183c4text-decoration: nonefont-weight: bold}
a:hover { text-decoration: underline}
h3 { color: #666}
ul { list-style: nonepadding: 25px 0}
li { display: inlinemargin: 10px 50px 10px 0px}
input[type=text], input[type=password] { font-size: 13pxmin-height: 32pxmargin: 0
padding: 7px 8pxoutline: nonecolor: #333background-color: #fffbackground-repeat:
no-repeatbackground-position: right centerborder: 1px solid #cccborder-radius: 3px
box-shadow: inset 0 1px 2px rgba(0,0,0,0.075)-moz-box-sizing: border-boxbox-sizing:
border-boxtransition: all 0.15s ease-in-webkit-transition: all 0.15s ease-in 0vertical-align: middle}
button { position: relativedisplay: inline-blockmargin: 0padding: 8px 15pxfont-size:
13pxfont-weight: boldcolor: #333text-shadow: 0 1px 0 rgba(255,255,255,0.9)white
space: nowrapbackground-color: #eaeaeabackground-image: -moz-linear
gradient(#fafafa, #eaeaea)background-image: -webkit-linear-gradient(#fafafa, #eaeaea)
background-image: linear-gradient(#fafafa, #eaeaea)background-repeat: repeat-x
border-radius: 3pxborder: 1px solid #dddborder-bottom-color: #c5c5c5box-shadow:
01px 3px rgba(0,0,0,.05)vertical-align: middlecursor: pointer-moz-box-sizing: border-box
box-sizing: border-box-webkit-touch-callout: none-webkit-user-select: none-khtml
user-select: none-moz-user-select: none-ms-user-select: noneuser-select: none
webkit-appearance: none}
.button:hover, .button:active { background-position: 0 -15pxborder-color: #ccc #ccc
#b5b5b5}
.button:active { background-color: #dadadaborder-color: #b5b5b5background-image:
nonebox-shadow: inset 0 3px 5px rgba(0,0,0,.15)}
.button:focus, input[type=text]:focus, input[type=password]:focus { outline: noneborder
color: #51a7e8box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5)}
label[for=search] { display: blocktext-align: left}
#search label { font-weight: 200padding: 5px 0}
#search input[type=text] { font-size: 18pxwidth: 705px}
#search .button { padding: 10pxwidth: 90px}
</style>
4、代码整体结构。
5、查看效果。
