当前位置：首页 > 下载站 > js特效 > CSS3特效 > CSS3的放大镜查看图片代码

CSS3的放大镜查看图片代码

分类: js特效 / CSS3特效	发布时间: 2017-12-28	访问量: 1745
下载量: 48

点击下载预览效果

更多>

最新下载

谷歌浏览器插件IconFont检查器自动获取当前页面使用到的iconfont库，预览、修改、使用

IconFont检查器是一款用来自动获取当前页面使用到的iconfont库工具，可以用来预览、修改和使用，适用于 Google Chrome 和 Microsoft Edge 浏览器。主要功能：检查字体图标：识别和分析网站上使用的所有字体图标。显示字体名称和字符代码：显示每个字体图标的字体名称和字符代码。查看 CSS 规则：显示用于设置字体图标的 CSS 规则。复制字体代码：轻松复制字体图标的代码

0 2025-12-24

jQuery手机账号管理表单代码

jQuery手机账号管理表单代码是一款手机端账号管理个人信息，修改资料，修改密码表单TAB切换页面模板。

0 2025-12-24

jQuery文字长阴影效果插件longShadow

jQuery文字长阴影效果插件longShadow是一款可以制作各种文字长阴影效果，可以配置长阴影的颜色，大小和方向等。

0 2025-12-24

横向的图文手风琴布局代码

jQuery基于css3制作精美黑色的横向手风琴布局滑动切换效果，结合大图和标题文字切换。这是一款大气的企业品牌产品图文手风琴布局代码。

0 2025-12-24

网页顶部智能固定导航特效

js黑色的网页顶部固定层导航，页面上下滚动导航智能显示或隐藏效果代码。适用于网页导航交互特效。

0 2025-12-24

谷歌浏览器插件Color Picker for Chrome™ 在网页上拾取颜色获取颜色HEX/RGB代码

Color Picker for Chrome™ 是一款HEX，RGB颜色选择器，高级滴管，能够在任何页面上拾取颜色，获得颜色的HEX/RGB代码。如何使用插件呢？✓ 安装后，打开您想要获取颜色代码的任何网页✓ 然后单击扩展图标，它将启用颜色选择器图标✓ 再点击所需拾取颜色的地方，它将以HEX和RGB选项为您提供该颜色代码的信息✓ 复制代码并复制相同的步骤以查找另一个颜色代码。Color Pick

0 2025-12-24

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

14421 2025-08-28
CSS3 教程

1541432 2025-08-27
Rust 教程

22113 2025-08-27
Vue 教程

24607 2025-08-22
PostgreSQL 教程

21294 2025-08-21
Git 教程

8393 2025-08-21

CSS3的放大镜查看图片代码

<body><script src="/demos/googlegg.js"></script>
<div class='container'>
<header>
<h1>SVG clip-path Hover Effect</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/1.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/2.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-2'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Aurora </text>
<g clip-path='url(#clip-2)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/3.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Aurora </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-3'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Angus </text>
<g clip-path='url(#clip-3)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/4.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Angus </text>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-4'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Huitzi </text>
<g clip-path='url(#clip-4)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/5.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Huitzi </text>
</g>
</svg>
</div>
<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>