Maison

Effets spéciaux JS

Effets spéciaux CSS3

Loupe CSS3 pour afficher le code de l'image

Télécharger maintenant Aperçu

<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.

Clause de non-responsabilité

Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn

Article connexe

Organisation d'effets spéciaux courants sur des pages Web : Avancé

23 Dec 2016

L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Chapitre avancé 1. différentes périodes

Organiser des effets spéciaux courants sur des pages Web : niveau élémentaire

23 Dec 2016

Organiser des effets spéciaux courants sur des pages Web : niveau intermédiaire

23 Dec 2016

Pas besoin de JS et jQuery pour implémenter le flottement de la souris CSS3 pour agrandir l'image

01 Mar 2017

Cet article partagera avec vous un morceau de code CSS3 pour obtenir l'effet de flottement de la souris pour agrandir l'image. Il n'y a pas besoin de code js et jquery dans le code. C'est très bon et a une valeur de référence. référez-vous à lui.

Exemple de code expliquant comment le composant C# Tabcontrol bascule pour afficher le formulaire Form

10 Mar 2017

La façon dont le composant c# tabcontrol affiche FORM est comme mentionné, c'est-à-dire que lorsque l'on clique sur un élément du composant menuStrip1 ou du composant toolStrip1, le FORM ne s'affichera plus et tout sera affiché dans le tabcontrol. Le nom du titre de la page de tabulation affichée. page est également le nom d'un élément dans le composant. Le formulaire FORM est conçu en premier, et tout le contenu doit être transformé en formulaire d'étiquette à chaque fois qu'un nouveau formulaire est ajouté, le nouveau formulaire est affiché et lorsque le formulaire est ajouté. est fermé, le dernier formulaire ouvert s'affiche. Code C# privé v

Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3

09 Mar 2017

L'éditeur ci-dessous vous apportera un code d'implémentation pour créer un magnifique mur de photos en utilisant CSS3. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l’éditeur et jetons un coup d’œil.

Une appréciation graphique et textuelle de 8 superbes effets spéciaux d'animation de texte HTML5

06 Mar 2017

Le texte est l’âme des pages Web. Il y a longtemps, quelqu’un a inventé de nombreuses belles polices informatiques, qui donnaient aux pages Web des styles différents. Avec l'émergence du HTML5 et du CSS3, nous pouvons personnaliser le texte. Dans certaines situations, lorsque cela est nécessaire, nous pouvons même utiliser HTML5 pour animer le texte. Cet article partage 8 très beaux effets spéciaux d'animation de texte HTML5, j'espère qu'il pourra être utilisé comme référence pour vous. 1. Animation de texte pliable et retourné 3D CSS3 Aujourd'hui, nous allons partager une application d'effets spéciaux de texte CSS3. Elle est similaire aux effets de texte HTML5/CSS3 partagés auparavant. Il s'agit également d'une animation de texte pliée et retournée 3D CSS3. .

Comment puis-je créer un effet de fondu à l'aide de transitions CSS3 ?

28 Oct 2024

Transitions CSS3 : obtention d'effets de fondu En CSS3, les transitions offrent un outil puissant pour créer des effets visuels dynamiques. Parmi ces effets, il y a...