gsap实现点击卡片翻转找黑卡片游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：gsap实现点击卡片翻转找黑卡片游戏代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: sans-serif;
  text-shadow: 1px 1px 1px black;
}

.card {
  margin: 20px;
  perspective: 600px;
}

.faces {
  width: 160px;
  height: 220px;
  transform-style: preserve-3d;
}

.face {
  border: 8px solid white;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  backface-visibility: hidden;
}

.front {
  background: #094166;
  /*added for mobile browsers*/
  transform: translateZ(1px);
}

.back {
  transform: rotateY(180deg);
  color: white;
  background: repeating-linear-gradient(70deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}

.loser .front {
  background: black;
}

.loser svg {
  filter: saturate(0);
}

/* page layout */
body,
html {
  width: 100%;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  font-size: 20px;
  background: #1d1d1d;
}

* {
  position: relative;
  box-sizing: border-box;
}

.wrapper {
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.front * {
  backface-visibility: hidden;
}

h1,
h3 {
  color: white;
  text-align: center;
}

h3 {
  margin: 0;
  padding: 0;
}

button {
  border: none;
  padding: 15px;
  background-color: #fff;
  color: #000;
}
</style>


</head>

<body>
  <h1>Click Cards to Flip</h1>
<h3>Find the black card</h3>
<div class="wrapper">
	<div class="card">
		<div class="faces">
			<div class="face front">
				<svg id="avatar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 558.89 558.89">
					<defs>
						<style>
							.cls-1 {
								fill: #3d6d98;
							}

							.cls-2 {
								fill: #275d8c;
							}

							.cls-3 {
								fill: #0f4b7f;
							}

							.cls-4 {
								fill: #0f4b80;
							}

							.cls-5 {
								fill: #6198bf;
							}

							.cls-opacity {
								opacity: 0;
							}

							.cls-6 {
								fill: #754c28;
							}

							svg .cls-7 {
								fill: #F8E9A1 !important;
							}

							svg.light .cls-7 {
								fill: #374785 !important;
							}

							.cls-8 {
								fill: #081e25;
							}

							.cls-9 {
								fill: #5d5a58;
							}

							.cls-10 {
								fill: #e5bc97;
							}

							.cls-11 {
								fill: #d7b090;
							}

							.cls-12 {
								fill: #deb593;
							}

							.cls-13 {
								fill: #fefefe;
							}

							.cls-14 {
								fill: #94a4ae;
							}

							.cls-15 {
								fill: #84a1b3;
							}

							.cls-16 {
								fill: #915c33;
							}

							.cls-17 {
								fill: #8f5b32;
							}

							.cls-18 {
								fill: #905c32;
							}

							.cls-19 {
								fill: #905c33;
							}

							.cls-20 {
								fill: #8d5a31;
							}

							.cls-21 {
								fill: #8e5a31;
							}

							.cls-22 {
								fill: #8a5930;
							}

							.cls-23 {
								fill: #925d33;
							}

							.cls-24 {
								fill: #8d5a32;
							}

							.cls-25 {
								fill: #8e5b32;
							}

							.cls-26 {
								fill: #8e5a32;
							}

							.cls-27 {
								fill: #8c5931;
							}

							.cls-28 {
								fill: #6996b4;
							}

							.cls-29 {
								fill: #88572f;
							}

							.cls-30 {
								fill: #f0e7df;
							}

							.cls-31 {
								fill: #8a5830;
							}

							.cls-32 {
								fill: #8a5831;
							}

							.cls-33 {
								fill: #885730;
							}

							.cls-34 {
								fill: #895830;
							}

							.cls-35 {
								fill: #8b5930;
							}

							.cls-36 {
								fill: #87572f;
							}

							.cls-37 {
								fill: #8b5931;
							}

							.cls-38 {
								fill: #935d34;
							}

							.cls-39 {
								fill: #678191;
							}

							.cls-40 {
								fill: #0e5c8a;
							}

							.cls-41 {
								fill: #0e5c89;
							}

							svg.light .cls-40,
							svg.light .cls-56,
							svg.light .cls-42 {
								fill: #F8E9A1 !important;
							}

							.cls-42 {
								fill: #094369;
							}

							.cls-43 {
								fill: #d89b93;
							}

							.cls-44 {
								fill: #e67581;
							}

							.cls-45 {
								fill: #fefdfd;
							}

							.cls-46 {
								fill: #cd9b78;
							}

							.cls-47 {
								fill: #ce9d7a;
							}

							.cls-48 {
								fill: #f2ded6;
							}

							.cls-49 {
								fill: #f5e7e2;
							}

							.cls-50 {
								fill: #d7a985;
							}

							.cls-51 {
								fill: #faf4f1;
							}

							.cls-52 {
								fill: #ebcec3;
							}

							.cls-53 {
								fill: #faf4f3;
							}

							.cls-54 {
								fill: #d8ab87;
							}

							.cls-55 {
								fill: #cc9b78;
							}

							.cls-56 {
								fill: #094268;
							}
						</style>
					</defs>

					<g id="items">
						<g id="avatarPaths">

							<g class="leftArm">
								<path class="cls-7" d="M148.71,344c-5.65,1.21-7.65,6-10.13,10.32a105,105,0,0,0,30,8.83,133.74,133.74,0,0,0,62-5.38,5.08,5.08,0,0,0,2.48-1.16c-3.37-3.29-5.49-7.43-7.88-11.39A183.3,183.3,0,0,1,203,350a112.39,112.39,0,0,1-45.75-3.39C154.37,345.79,151.55,344.88,148.71,344Z" />
								<path class="cls-12" d="M121.27,343.09a36,36,0,0,0-22.46,10.53c-1.59,1.57-2.92,3.41-1.68,5.68s3.56,2.16,5.68,2c7.88-.77,13.82-5.55,20-9.85,2-1.37,3.84-2.91,5.76-4.38a.44.44,0,0,1,.68.1c.11.15.05.32-.11.47-1.84,3-4.19,5.69-5.06,9.23-.82,3.31.57,5.23,4,5.25,3.83,0,6.29-2.4,8.55-5.07.72-.85,1.33-1.78,2-2.67,1.71-.72,2.07-2.52,3-3.84,1.63-2.25,3-4.66,6.06-5.35a1.26,1.26,0,0,0,1.06-1.13c5.9-3.27,11.28-7.16,15.37-12.63a14.14,14..........完整代码请登录后点击上方下载按钮下载查看