一款CSS3 SVG的悬停图片剪切路径动画特效,根据悬停鼠标的位置的不同,来显示不同遮罩形状背后的真实图片内容,每个图片都可以自由设置简洁的标题内容,图片也可以自由更换,喜欢的童鞋请收下吧。
页面的head部分,需引入一个必要的样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,多个div容器里分别放入对应的svg路径和图片,重复的结构内容可以自由复制粘帖,代码如下:
<div class='container'>
<header>
<h1>CSS3 SVG悬停图片剪切路径动画特效</h1>
</header>
<main>
<div class='items'>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-0'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> X-rays </text>
<g clip-path='url(#clip-0)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/i-xrays.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> X-rays </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-1'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Worms </text>
<g clip-path='url(#clip-1)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/i-worms.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Worms </text>
</g>
</svg>
</div>
//省略部分演示代码
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-11'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> V III </text>
<g clip-path='url(#clip-11)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/i-v3.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> V III </text>
</g>
</svg>
</div>
</div>
</main>
</div>
<div class='options'>
<button class='dark'></button>
<button class='light'></button>
</div>
页面的底部,需引入一个必要的JS文件,代码如下:
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791