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

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

代码语言：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;
							}

		.........完整代码请登录后点击上方下载按钮下载查看