SVG 剪輯路徑懸停效果

</標(biāo)題>
<主要>

<定義>

<圓 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>
惠茲 </text>

<影像高度='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放大鏡查看圖片代碼是一款採用網(wǎng)格佈局，滑鼠懸停圖片svg剪切路徑動(dòng)畫特效，具體效果看示範(fàn)感受一下。 ###

免責(zé)聲明

本站所有資源皆由網(wǎng)友貢獻(xiàn)或各大下載網(wǎng)站轉(zhuǎn)載。請(qǐng)自行檢查軟體的完整性！本站所有資源僅供學(xué)習(xí)參考。請(qǐng)不要將它們用於商業(yè)目的。否則，一切後果都由您負(fù)責(zé)！如有侵權(quán)，請(qǐng)聯(lián)絡(luò)我們刪除。聯(lián)絡(luò)方式：admin@php.cn