css实现图片蒙版放大特效

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

code.juejin.cn/pen/7146869…

本文写一个简单的css小demo记录一下图片蒙版放大效果的场景

本文使用vue3来进行编辑，为了熟悉vue3和参加掘金的码上掘金活动，这几天我会抽空多更新几个模块来进行写dome，写的时间比较有限，所以Ui也是尽量从简，功能还是比较完善的。文章的内容不多，欢迎大家阅读和批评指正。

今天实现一个图片蒙蔽放大的效果，主要是通过图片上层放一层蒙版，在鼠标悬浮的时候，对最上层的原图片进行裁剪，虽然在页面上看起来是放大的效果，但是如果用放大的话，会显示出不一样的结果，所以需要用到css的一个样式来进行模仿放大的效果，其实就是clip-path，从中心开始裁剪，最后裁剪到全部

    clip-path: circle(30% at 50% 50%);

clip-path: circle(30% at 50% 50%)的意思就是从中心裁剪30%，达到下面的效果，再加上一个过渡的效果，就可以实现差不多是放大的效果了。

 <div class="bb">
        <div class="box" >
        </div>
        <div class="box1" >
        </div>
        <div class="mask">
        </div>
    </div>

这里主要是设置了三个div，第一个是底图，第二个是蒙版，第三个是用来视觉效果实现切换的原图，底图和蒙版是不变的，变化的只是最上层的裁剪图，默认全部裁剪成0，hover的时候裁剪到50%，就是还原成原来的圆形，加上trasition的过渡效果，就可以实现放大的特效。