CSS3 SVG悬停图片剪切路径动画特效

一款CSS3 SVG的悬停图片剪切路径动画特效，根据悬停鼠标的位置的不同，来显示不同遮罩形状背后的真实图片内容，每个图片都可以自由设置简洁的标题内容，图片也可以自由更换，喜欢的童鞋请收下吧。

分类：图片代码 > 图片墙难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的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>