localisation actuelle: Maison > Télécharger > Effets JS > Effets spéciaux CSS3 > Loupe CSS3 pour afficher le code de l'image
Loupe CSS3 pour afficher le code de l'image
Classer: Effets JS / Effets spéciaux CSS3 | Temps de libération: 2017-12-28 | visites: 1620 |
Télécharger: 47 |
Derniers téléchargements
Aquarium Fantastique
Filles en première ligne
Ailes d'étoiles
Petite Fée des Fleurs Paradis Féérique
Restaurant Histoire mignonne
Exploration de voyage à Shanhe
Amour et producteur
Le cerveau le plus puissant 3
Odd Dust : Damila
Jeune voyage vers l'Ouest 2
24 heuresClassement de lecture
- 1 Pourquoi est-ce que j'obtiens une erreur 404 lors de l'insertion d'images dans mon blog Hugo ?
- 2 dsetup16.dll – Qu’est-ce que dsetup16.dll ?
- 3 dtrsve.dll – Qu'est-ce que dtrsve.dll ?
- 4 dxcodex.ocx – Qu'est-ce que dxcodex.ocx ?
- 5 std::shared_ptr est-il Thread-Safe lors de la modification d'objets partagés ?
- 6 dsbho_02.dll – Qu’est-ce que dsbho_02.dll ?
- 7 Stratégies pour réduire le temps de démarrage et l'empreinte mémoire de votre application Java jusqu'à
- 8 Pourquoi la création de mon événement MySQL échoue-t-elle avec le message « Vous avez une erreur dans votre syntaxe SQL » ?
- 9 Pourquoi mon fichier Sass génère-t-il une erreur « CSS invalide : expression attendue » ?
- 10 Pourquoi mon ne rétrécit-il pas comme prévu ? Il semble avoir un problème de min-width: min-content non amovible.
- 11 dwin0008.dll – Qu’est-ce que dwin0008.dll ?
- 12 Quelles sont les principales différences entre les classes imbriquées statiques et non statiques en Java ?
- 13 Le prix de X Empire a grimpé jusqu'au nouvel ATH : voici ce que vous devez savoir
- 14 dwpp.dll – Qu'est-ce que dwpp.dll ?
- 15 Pourquoi le type de retour de ma méthode d'interface Go provoque-t-il une erreur de compilation ?
Derniers tutoriels
-
- Aller au langage pratique GraphQL
- 1997 2024-04-19
-
- Premiers pas avec MySQL (Professeur Mosh)
- 1801 2024-04-07
-
- Mock.js | Axios.js | Json | Dix jours de cours de qualité
- 2614 2024-03-29
<body><script src="/demos/googlegg.js"></script>
<div class='conteneur'>
<en-tête>
<h1>Effet de survol du chemin de clip SVG</h1>
</en-tête>
<principal>
<div class='items'>
<div class='item'>
<svg préservationAspectRatio='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%'> Rayons X </texte>
<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%'> Rayons X </texte>
</g>
</svg>
</div>
<div class='item'>
<svg préservationAspectRatio='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%'> Vers </texte>
<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%'> Vers </texte>
</g>
</svg>
</div>
<div class='item'>
<svg préservationAspectRatio='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%'> Aurore </texte>
<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%'> Aurore </texte>
</g>
</svg>
</div>
<div class='item'>
<svg préservationAspectRatio='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 </texte>
<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 </texte>
</g>
</svg>
</div>
<div class='item'>
<svg préservationAspectRatio='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'>
& Lt; SVG Preserveaspectratio = 'Xmidymid Slice' ViewBox = '0 0 300 200' & GT;
<clipPath id='clip-5'>
& Lt; Cercle CX = '0' Cy = '0' Remplissage = '#000' R = '150px' & GT;/Cercle & GT;
<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%'>
</svg>
</div>
</div>
</main>
</div>
Le code de visualisation de l'image en forme de loupe CSS3 SVG est une disposition en grille, des effets spéciaux d'animation de chemin de détourage SVG sur l'image, voir la démonstration pour découvrir l'effet spécifique.