css实现剪刀石头布猜拳游戏代码-html代码-BFW代码库

css实现剪刀石头布猜拳游戏代码

代码语言：html

所属分类：游戏

代码描述：css实现剪刀石头布猜拳游戏代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css?family=Acme&display=swap');
	@keyframes changeOrder {
	from {
	z-index:9;
}
to {
	z-index:1;
}
}@keyframes handShake {
	0%,100% {
	transform:rotate(10deg);
}
50% {
	transform:rotate(-10deg);
}
}@keyframes handShake2 {
	0%,100% {
	transform:rotateY(180deg) rotate(10deg);
}
50% {
	transform:rotateY(180deg) rotate(-10deg);
}
}html,body {
	margin:0;
	padding:0;
	border:0;
	line-height:1;
	font-family:Acme,Arial,sans-serif;
}
form {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
h1 {
	text-align:center;
}
#hands {
	text-align:center;
}
input:checked ~ div .hand {
	animation:none !important;
}
.hand {
	margin:20px;
	width:200px;
	height:200px;
	position:relative;
	transform:rotate(10deg);
	display:inline-block;
	animation:handShake 2s infinite;
}
.hand >div {
	position:absolute;
	box-sizing:border-box;
	border:2px solid black;
	background:gold;
	transition:all 0.1s;
}
.fist {
	height:110px;
	left:40px;
	top:50px;
	width:90px;
	border-radius:20px 0 0 20px;
}
.finger {
	width:70px;
	height:30px;
	border-radius:20px;
	left:80px;
	transform-origin:0 50%;
}
.finger-1 {
	top:5.........完整代码请登录后点击上方下载按钮下载查看