Effets spéciaux JS
Effets spéciaux CSS3
Extension de cartes à jouer CSS3 et effets spéciaux d'animation pliables
Extension de cartes à jouer CSS3 et effets spéciaux d'animation pliables
L'effet spécial d'extension et d'animation de pliage de carte à jouer CSS3 est un effet d'extension et d'animation de pliage de carte en clic produit par CSS3 SVG.
L'effet spécial d'extension et d'animation de pliage de carte à jouer CSS3 est un effet d'extension et d'animation de pliage de carte en clic produit par CSS3 SVG.
<!DOCTYPE html>
<html>
<tête>
<meta charset="UTF-8">
<title>css3 extension de cartes à jouer et effets spéciaux d'animation pliante</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</tête>
<body><script src="/demos/googlegg.js"></script>
<div class="perspective">
<div class='card-container'>
<div class="message">Cliquez sur la carte à gauche</div>
<div class='card card-card1'>
<div class='card__face card__face--top'>
? ? ? ? ? <span class='card__value'>
? ? ? ? ?A
? ? ? ? ? </span>
? ? ? ? ? <span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
?????????????? <g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ?? ? ??? ?? ???? ? ????????????????? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ????? ??????? ? ????????????????? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?35F5C"></path>
?????????????????????????????????????????????????????????
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ?? ? ? ? ? ? ? ??? ? ??? ? ?
? ? ? ? ? </span>
</div>
? ? ? <div class='card__face card__face--btm'>
? ? ? ? <span class='card__value'>
? ? ? ? ? A
? ? ? ? </span>
? ? ? ? <span class='card__suit'>
? ? ? ? ? <svg width="21px" height="16px" viewBox="0 0 21 16" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
? ? ? ? ? ? ? <g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
? ? ? ? ? ? ? ? ? <chemin d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Chemin-2" trait="#635F5C"></chemin>
? ? ? ? ? ? ? </g>
? ? ? ? ? </svg>
? ? ? ? </span>
? ? ? </div>
? ? </div>
? ? <div class='card card-card2'>
? ? ? <div class='card__face card__face--top'>
? ? ? ? <span class='card__value'>
? ? ? ? ? K
? ? ? ? </span>
? ? ? ? <span class='card__suit'>
? ? ? ? ? <svg width="20px" height="21px" viewBox="0 0 20 21" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
? ? ? ? ? ? ? <g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
? ? ? ? ? ? ? ? ? <rect id="Rectangle-3" trait="#A68385" transform="translate(10.035534, 10.071068) rotation(-315.000000) translation(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" largeur ="13.1923882" hauteur="13.1923882"></rect>
? ? ? ? ? ? ? </g>
? ? ? ? ? </svg>
? ? ? ? </span>
? ? ? </div>
? ? ? <div class='card__face card__face--btm'>
? ? ? ? <span class='card__value'>
? ? ? ? ? K
? ? ? ? </span>
? ? ? ? <span class='card__suit'>
? ? ? ? ? <svg width="20px" height="21px" viewBox="0 0 20 21" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
? ? ? ? ? ? ? <g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
? ? ? ? ? ? ? ? ? <rect id="Rectangle-3" trait="#A68385" transform="translate(10.035534, 10.071068) rotation(-315.000000) translation(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" largeur ="13.1923882" hauteur="13.1923882"></rect>
? ? ? ? ? ? ? </g>
? ? ? ? ? </svg>
? ? ? ? </span>
? ? ? </div>
? ? </div>
? ? <div class='card card-card3'>
? ? ? <div class='card__face card__face--top'>
? ? ? ? <span class='card__value'>
? ? ? ? ? Q
? ? ? ? </span>
? ? ? ? <span class='card__suit'>
? ? ? ? ? <svg width="21px" height="18px" viewBox="0 0 21 18" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
? ? ? ? ? ? ? <g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
? ? ? ? ? ? ? ? ? <circle id="Ovale" Stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
? ? ? ? ? ? ? ? ? <circle id="Ovale" Stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
? ? ? ? ? ? ? ? ? <circle id="Ovale" Stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
? ? ? ? ? ? ? </g>
? ? ? ? ? </svg>
? ? ? ? </span>
? ? ? </div>
? ? ? <div class='card__face card__face--btm'>
? ? ? ? <span class='card__value'>
? ? ? ? ? Q
? ? ? ? </span>
? ? ? ? <span class='card__suit'>
? ? ? ? ? <svg width="21px" height="18px" viewBox="0 0 21 18" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
? ? ? ? ? ? ? <g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
? ? ? ? ? ? ? ? ? <circle id="Ovale" Stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
? ? ? ? ? ? ? ? ? <circle id="Ovale" Stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
? ? ? ? ? ? ? ? ? <circle id="Ovale" Stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
? ? ? ? ? ? ? </g>
? ? ? ? ? </svg>
? ? ? ? </span>
? ? ? </div>
? ? </div>
? ? <div class='card card-card4'>
? ? ? <div class='card__face card__face--top'>
? ? ? ? <span class='card__value'>
? ? ? ? ? J
? ? ? ? </span>
? ? ? ? <span class='card__suit'>
? ? ? ? ? <svg width="20px" height="16px" viewBox="0 0 20 16" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
? ? ? ? ? ? ? <g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
? ? ? ? ? ? ? ? ? <chemin d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Chemin-2" trait="#A68385" , 7.631510) rotation( -180.000000) traduire (-10.000000, -7.631510) "></path>
? ? ? ? ? ? ? </g>
? ? ? ? ? </svg>
? ? ? ? </span>
? ? ? </div>
? ? ? <div class='card__face card__face--btm'>
? ? ? ? <span class='card__value'>
? ? ? ? ? J
? ? ? ? </span>
? ? ? ? <span class='card__suit'>
? ? ? ? ? <svg width="20px" height="16px" viewBox="0 0 20 16" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
? ? ? ? ? ? ? <g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
? ? ? ? ? ? ? ? ? <chemin d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Chemin-2" trait="#A68385" , 7.631510) rotation( -180.000000) traduire (-10.000000, -7.631510) "></path>
? ? ? ? ? ? ? </g>
? ? ? ? ? </svg>
? ? ? ? </span>
? ? ? </div>
? ? </div>
? </div>
</div>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</corps>
</html>
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
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...
Les transitions CSS3 fournissent-elles des événements pour détecter les points de début et de fin??
18 Nov 2024
Comprendre les événements de transition CSS3 Les transitions CSS3 permettent des animations fluides et des effets visuels sur les éléments Web. Pour valoriser l'utilisateur...
Pourquoi mon animation slide-up utilisant CSS3 @keyframes ne fonctionne-t-elle pas??
28 Oct 2024
Transition CSS3 - Effet de fondu sortantEn utilisant CSS3, vous pouvez facilement implémenter des effets de fondu pour améliorer l'expérience utilisateur. Cependant, si vous rencontrez...
Comment puis-je détecter le début et la fin des transitions CSS3??
31 Dec 2024
Détection des événements de transition CSS3 Les transitions dans CSS3 ajoutent des effets dynamiques aux éléments Web, améliorant ainsi leur réactivité. Pourtant, c'est souvent...
Comment puis-je créer des effets CSS3 dans Internet Explorer 7/8 ?
28 Oct 2024
émulation des effets CSS3 dans Internet Explorer 7/8De nombreux sites Web utilisent les capacités de CSS3 pour améliorer l'apparence des éléments à l'aide d'arrondis...
Comment émuler CSS3 Border-Radius et Box-Shadow dans IE7/8??
02 Nov 2024
émulation CSS3 Border-Radius et Box-Shadow dans IE7/8En l'absence de support CSS3 natif dans Internet Explorer 7 et 8, obtenir des effets tels que...
Comment pouvez-vous imiter les effets CSS3 dans les anciens navigateurs IE??
28 Oct 2024
émuler les merveilles des effets CSS3 dans les anciens navigateurs IE Alors que CSS3 apporte une pléthore d'effets élégants à la conception Web, les navigateurs existants comme...
Est-ce que ??transition?: all?? ralentit les transitions CSS3??
03 Dec 2024
Est-ce que ??Transition?:?Tout?? entrave la vitesse de transition CSS3?? L'utilisation de transitions CSS3 offre des effets animés aux éléments Web. Une pratique courante consiste à employer...
Comment puis-je créer du texte incurvé en utilisant CSS3, Canvas ou SVG ?
08 Dec 2024
Création de texte incurvé avec CSS3, Canvas ou SVGObtenir des effets de texte incurvés ou arqués à l'aide de CSS3 ou d'autres technologies Web est une conception courante...
Outils chauds Tags
Outils chauds
Le texte CSS est combiné dans un effet spécial d'animation en forme de c?ur
Le texte CSS est combiné dans un effet spécial d'animation en forme de c?ur
Effets spéciaux d'animation de fleurs d'expression CSS3 SVG
L'effet spécial d'animation de fleur de confession SS3 SVG est un effet spécial d'animation pour la Saint-Valentin.
Les sites Web des centres commerciaux CSS utilisent couramment le code du menu de navigation déroulant de la catégorie de gauche
Les sites Web des centres commerciaux CSS utilisent couramment le code du menu de navigation déroulant de la catégorie de gauche
jQuery+CSS3 Effet d'amour pour la Saint-Valentin
jQuery + CSS3 Valentine's Day Love Special Effect est un effet spécial d'animation de c?ur oscillant suspendu pour la Saint-Valentin.
cuillère css3 ramassant des effets spéciaux d'animation de boulettes de riz gluant
Un bol d'expression mignonne de boulettes de riz gluant, une cuillère ramassant des effets spéciaux d'animation de boulettes de riz gluant