SVG 剪辑路径悬停效果

</标题>
<主要>

<定义>

<圆 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
X 射线

<图像高度='100%'preserveAspectRatio='xMinYMin切片'宽度='100%'xlink:href='img/1.png'>
X光片
</g>
</svg>

;

<定义>

<圆 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
蠕虫

<图像高度='100%'preserveAspectRatio='xMinYMin切片'宽度='100%'xlink:href='img/2.png'>
蠕虫
</g>
</svg>

<定义>

<圆 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
极光

<图像高度='100%'preserveAspectRatio='xMinYMin切片'宽度='100%'xlink:href='img/3.png'>
极光
</g>
</svg>

;

<定义>

<圆 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
安格斯

<图像高度='100%'preserveAspectRatio='xMinYMin切片'宽度='100%'xlink:href='img/4.png'>
安格斯
</g>
</svg>

<定义>

<圆 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
惠兹

<图像高度='100%'preserveAspectRatio='xMinYMin切片'宽度='100%'xlink:href='img/5.png'>
惠兹 </text>
</g>
</svg>

;
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-5'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Dalí </text>
<g clip-path='url(#clip-5)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/6.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Dalí </text>
</g>
</svg>
</div>
</div>
</main>
</div>

CSS3 SVG放大镜查看图片代码是一款采用网格布局，鼠标悬停图片svg剪切路径动画特效，具体效果看演示感受一下。

免责声明

本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性！本站所有资源仅供学习参考。请不要将它们用于商业目的。否则，一切后果由您负责！如有侵权，请联系我们删除。联系方式：admin@php.cn