Heim

JS-Spezialeffekte

CSS3-Spezialeffekte

CSS3-Spielkartenerweiterung und Spezialeffekte für Faltanimationen

Der Spezialeffekt „CSS3-Spielkartenerweiterung und Faltanimation“ ist ein Klickkartenerweiterungs- und Faltanimationseffekt, der von CSS3 SVG erzeugt wird.

Jetzt downloaden Vorschau

Der CSS3-Spielkartenerweiterungs- und Faltanimationseffekt ist ein Klickkartenerweiterungs- und Faltanimationseffekt, der von CSS3 SVG erzeugt wird.

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>CSS3-Spielkartenerweiterung und Faltanimations-Spezialeffekte</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>

<body><script src="/demos/googlegg.js"></script>

<div class="perspective">
<div class='card-container'>
<div class="message">Klicken Sie auf die Karte links</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" version="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">
" id="Path-2" Stroke="#635F5C"></path>
</svg>
</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" version="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">
<Pfad d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Pfad-2" Stroke="#635F5C"></path>
</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" version="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" Stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translator(-10.035534, -10.071068) " width="13.1923882" height="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" version="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" Stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translator(-10.035534, -10.071068) " width="13.1923882" height="13.1923882"></rect>
</g>
</svg>
</span>
</div>
</div>
<div class='card card-card3'>
<div class='card__face card__face--top'>
<span class='card__value'>
F
</span>
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" version="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="Oval" Stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" Stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" 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'>
F
</span>
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" version="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="Oval" Stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" Stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" 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" version="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">
<Pfad d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Pfad-2" Stroke="#A68385" transform="translate(10.000000, 7.631510) rotation(-180.000000) translator(-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" version="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">
<Pfad d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Pfad-2" Stroke="#A68385" transform="translate(10.000000, 7.631510) rotation(-180.000000) translator(-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>
</body>
</html>

Haftungsausschluss

Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn

Verwandter Artikel

Verschiedene Spezialeffekte des Filters in CSS3

09 Oct 2016

Verschiedene Spezialeffekte des Filters in CSS3

HTML5CSS3-Spezialeffekte – Ball springt auf und ab

14 Oct 2016

HTML5CSS3-Spezialeffekte – Ball springt auf und ab

javascript – Gibt es eine Software oder ein Plug-In, das die gesamte URL extrahieren kann?

04 Aug 2016

Ich habe einige gut aussehende Websites gesehen und wollte wissen, wie ihre Animationen und Spezialeffekte erstellt wurden. Gibt es eine Software oder ein Plug-in, das die gesamte URL einschließlich JS- und CSS-Stilen extrahieren kann?

Können Sie in CSS3 unterschiedliche Breiten für Spalten festlegen?

31 Oct 2024

Spaltenbreiten in CSS3 anpassenFrage:Ist es möglich, in CSS3 unterschiedliche Breiten für Spalten anzugeben?Diskussion:In CSS3 ist die Spaltenbreite...

Warum funktioniert meine CSS3-Animation in Safari nicht?

29 Nov 2024

CSS3-Animationen funktionieren in Safari nicht. Es treten einige Probleme mit Animationen auf, die CSS3 verwenden und CSS3 unterstützen ...

Können HTML5 und CSS3 wirklich Kreise zeichnen?

23 Nov 2024

Kreise mit HTML5 und CSS3 zeichnenDiese Frage untersucht die Möglichkeit, Kreise mit HTML5 und CSS3 zu zeichnen. Können HTML5 und CSS3 ... erstellen?

Wie kann ich einen eingefügten Randradius mithilfe von CSS3-Verläufen simulieren?

05 Dec 2024

Simulieren eines eingefügten Randradius mit CSS3-Verläufen Das Erreichen eines eingelassenen Randradiuseffekts allein mit CSS3 stellt eine Herausforderung dar. Allerdings mit CSS3...

Wie erstelle ich mit CSS3 und SVG eine Wellenform mit Rand?

13 Nov 2024

Wellenform mit Rand mit CSS3 und SVGDie Implementierung einer Wellenform mit CSS3 kann eine Herausforderung sein. Während CSS3-Formen eine große Auswahl bieten ...

Warum funktioniert meine CSS3-Animation in Safari nicht?

14 Dec 2024

CSS3-Animationen funktionieren in Safari nicht. Sie stehen vor einem Problem, bei dem CSS3-Animationen in Safari nicht funktionieren. Obwohl die Animation CSS3 unterstützt...

See all articles