1：新建背景图层，填充色为白色；
2：选用横排文字工具，输入自己喜欢的文字如（我是齐天大圣孙悟空），调整到合适大小（较大，我选的是280号），栅格化文字。
3：ctrl+E合并图层，并复制，命名为图层1 。
4：shift+ctrl+N 新建图层2，选用横排文字工具，输入与图层一相同文字（我是齐天大圣孙悟空），ctrl+T调整大小（较小大概是72号），使得图层2与图层1中对应的字大概在一个位置。
5：shift+ctrl+N 新建图层3，选择圆形选框工具，建立区域。
6：ctrl+T调整选取位置及大小，保证可以完全覆盖住图层1中的单个字体；
7：选取图层3 ，给选区内填充背景色白色。
8：双击图层3缩略图，设置填充不透明度为0，挖空为 深，其他不变，确定：
9：给图层三创建组（ctrl+G），对图层三调整。ctrl+T，用键盘上的上下左右键调整，大概就是右移4-5个单位，确定。
10：按住shift+ALT+CTRL+T重复第九步操作并复制新图层，知道最后一个字看不到。
11：对图层三的组中的没一张图片进行滤镜——扭曲——球面化 根据实际情况自己调整；
11：选择窗口——动画。每一帧就是图层三组中的每一幅图片。点击播放，效果就会出来了。
12：最重要的一步！！！点击文件——存储为web和设备所用格式 存储为GIF格式。
一张动态的，放大镜时的图片就完成了 希望对大家有用
1、给body添加背景图，在body中添加一个父盒子（父盒子开启绝对定位），父盒子中再添加一个子盒子。
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
第一个图层写出你要放大的文字，新建图层，画一个矩形，这个矩形中间挖一个圆--圆的大小和放大镜镜片必须一致。无论这个圆移动到文字最左边或是最右边，这个矩形都能把文字遮完。也就是说这个矩形比较长。
2
新建图层，写入已经放大的文字。可以将第一图层的文字复制后变形放大。摆放位置和第一图层文字的X、Y坐标一样，因为此文字是放大后效果，文字总长度肯定比第一图层的要长，也高些。然后新建图层，画一个圆，这个圆和第二图层矩形的圆必须一样，而且放的位置就是矩形挖去后的圆位置。再新建图层，画一个放大镜边框，和上一图层的圆要组合好，看上去就是一个放大镜。
3
一切准备就绪，开始制作放大动画。此时锁定两个文字图层(放大前和放大后的)，在第一帧选择其他所有图层，创建补间动画，动画长度根据个人喜好而定，想放大镜移动慢，就多些帧，想移动快点，动画帧数就少点。
4
动画制作好后最关键的来了，选中图层二，此时不是在舞台上选，而是点击图层名字，右键弹出菜单选“遮罩层”，下面的图层(图层一)会自动成为被遮罩层。同理选中第四层--镜片图层，右键选择“遮罩层”，下面的图层--放大后的文字图层自动成为被遮罩层。
测试动画，一个放大镜效果flash制作完成。
