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

CSS3的放大镜查看图片代码

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

点击下载预览效果

更多>

24小时阅读排行榜

更多>

最新教程

支付宝沙箱支付（个人也能用的支付）

麻省理工大佬Python课程

9392 2024-05-31
Swoole5 Hyperf3 php8新版本协程框架讲说

11969 2024-05-13
【web前端】Node.js快速入门

7851 2024-04-26
国外Web开发全栈课程全集

7775 2024-04-24
Go语言实战之 GraphQL

5585 2024-04-19
550W粉丝大佬手把手从零学JavaScript

6400 2024-04-18

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>