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;
	dis.........完整代码请登录后点击上方下载按钮下载查看