gsap+svg实现扑克牌背面图案翻转切换效果代码-html代码-BFW代码库

gsap+svg实现扑克牌背面图案翻转切换效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现扑克牌背面图案翻转切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
	--maincolor: #a4323c;
	--bakgroundcolor: #d9cdb8;
}

body {
	background-color: #fff;
	margin-top: 20px;
	display: grid;
	place-items: center;
	color: #000;
}

/* The card */
svg {
	margin: 0 auto;
}

#card {
	border-radius: 10px;
	margin: 0 auto;
}

.wrapper {
	text-align: center;
}

.st0 {
	fill: var(--maincolor);
}
.st1,
.background {
	fill: var(--bakgroundcolor);
}
.st2 {
	stroke: var(--bakgroundcolor);
	stroke-width: 2;
	fill: none;
}
.st4 {
	stroke: var(--bakgroundcolor);
	stroke-width: 1;
	fill: none;
}
.st11 {
	fill: var(--bakgroundcolor);
	opacity: 1;
}
.st12 {
	fill: var(--bakgroundcolor);
	opacity: 0.7;
}
.st10 {
	fill: var(--bakgroundcolor);
	opacity: 0.5;
}
.st9 {
	fill: var(--bakgroundcolor);
	opacity: 0.3;
}
.pattern,
.pattern1,
.pattern2,
.pattern3,
.pattern4,
.pattern5,
.pattern6 {
	stroke: var(--bakgroundcolor);
	stroke-width: 4;
}
.pattern {
	fill: url(#pattern);
}
.pattern1 {
	fill: url(#pattern1);
}
.pattern2 {
	fill: url(#pattern2);
}
.pattern3 {
	fill: url(#pattern3);
}
.pattern4 {
	fill: url(#pattern4);
}
.pattern5 {
	fill: url(#pattern5);
}
.pattern6 {
	fill: url(#pattern6);
}

/* Nav */

h1 {
	font-family: "Lato", sans-serif;
	letter-spacing: 1px;
	margin-top: 20px;
	text-transform: uppercase;
	font-size: 1.4em;
	display: block;
	font-weight: 900;
	text-align: center;
	width: 100%;
}

.nav {
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
}
input {
	background: #fff;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: 700;
	font-family: "Lato", sans-serif;
	letter-spacing: 1px;
	transition: 0.5s;
	margin: 5px;
	cursor: pointer;
	padding: 10px 15px;
	border: 1px solid #bbb;
	border-radius: 5px;
	min-width: 80px;
	color: #000;
}
input:hover {
	background: #ddd;
}
</style>



</head>

<body >
  <div class="wrapper">
	<svg width="300px" height="440px" id="card">

		<!-- Fence pattern -->
		<pattern id="pattern" x="0" y="0" patternUnits="userSpaceOnUse" patternTransform="rotate(0)" width="20" height="20" viewBox="0 0 20 20">
			<line class="st2" x1="0" y1="0" x2="20" y2="20" />
			<line class="st2" x1="0" y1="20" x2="20" y2="0" />
		</pattern>

		<!-- Dots pattern -->
		<pattern id="pattern1" x="0" y="0" patternUnits="userSpaceOnUse" patternTransform="rotate(0)" width="20" height="20" viewBox="0 0 20 20">
			<circle class="st1" cx="5" cy="5" r="5" />
			<circle class="st1" cx="15" cy="15" r="5" />
		</pattern>

		<!-- Chess pattern-->
		<pattern id="pattern2" x="0" y="0" patternUnits="userSpaceOnUse" patternTransform="rotate(0)" width="20" height="20" viewBox="0 0 20 20">
			<rect x="3.3" y="3.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.1421 10.0002)" class="st1" width="13.4" height="13.4" />
		</pattern>

		<!-- Snake pattern-->
		<pattern id="pattern3" x="0" y="0" patternUnits="userSpaceOnUse" patternTransform="rotate(0)" width="20" height="20" viewBox="0 0 20 20">
			<path class="st2" d="M0,8.5c5,0,5,4,10,4s5-4,10-4" />
			<path class="st2" d="M9,20c0-5,4-5,4-10c0-5-4-5-4-10" />
		</pattern>

		<!-- Cube pattern-->
		<pattern id="pattern4" x="0" y="0" patternUnits="userSpaceOnUse" patternTransform="rotate(0)" width="20" height="20" viewBox="0 0 20 20">
			<polygon class="st12" points="0,5.9 10,11.7 10,20 0,14.1" />
			<polygon class="st10" points="0,5.9 10,0 20,5.9 10,11.7" />
			<polygon class="st11&qu.........完整代码请登录后点击上方下载按钮下载查看