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

代码语言：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:50px;
	--dif:0px;
}
.finger-2 {
	top:78px;
	left:84px;
	--dif:4px;
}
.finger-3 {
	top:106px;
	--dif:0px;
}
.finger-4 {
	top:134px;
	height:26px;
	left:76px;
	--dif:-8px;
}
div.thumb {
	width:35px;
	height:70px;
	border-radius:0 20px 20px 20px;
	top:50px;
	left:80px;
	border-left:0 solid;
	box-shadow:-17px 6px 0 -15px black;
}
div.arm {
	width:22px;
	height:70px;
	left:20px;
	top:70px;
	border:0;
	border-top:2px solid black;
	border-bottom:2px solid black;
}
#user-hand {
	transform:rotateY(180deg);
	animation:handShake2 2s infinite;
	position:relative;
}
input[type="radio"] {
	position:absolute;
	top:-1000in;
	left:-1000in;
}
input[id$="scissors"]:checked ~ div #user-hand .finger-1,input[id^="scissors"]:checked ~ div #computer-hand .finger-1 {
	width:130px;
	transform:rotate(-5deg);
}
input[id$="scissors"]:checked ~ div #user-hand .finger-2,input[id^="scissors"]:checked ~ div #computer-hand .finger-2 {
	width:130px;
	transform:rotate(5deg);
}
input[id$="paper"]:checked ~ div #user-hand .finger-1,input[id$="paper"]:checked ~ div #user-hand .finger-2,input[id$="paper"]:checked ~ div #user-hand .finger-3,input[id$="paper"]:checked ~ div #user-hand .finger-4,input[id^="paper"]:checked ~ div #computer-hand .finger-1,input[id^="paper"]:checked ~ div #computer-hand .finger-2,input[id^="paper"]:checked ~ div #computer-hand .finger-3,input[id^="paper"]:checked ~ div #computer-hand .finger-4 {
	left:124px;
	left:calc(124px + var(--dif));
	width:80px;
	border-left:0;
	border-radius:0 20px 20px 0;
}
#rock-rock:checked ~ div h2::before,#paper-paper:checked ~ div h2::before,#scissors-scissors:checked ~ div h2::before {
	content:"You Tied!"
}
#rock-paper:checked ~ div h2::before,#paper-scissors:checked ~ div h2::before,#scissors-rock:checked ~ div h2::before {
	content:"You Win!"
}
#rock-scissors:checked ~ div h2::before,#paper-rock:checked ~ div h2::before,#scissors-paper:checked ~ div h2::before {
	content:"Computer Wins!"
}
#message {
	text-align:center;
	display:none;
}
input:checked ~ #message {
	display:block;
}
#hands {
	display:flex;
	align-items:center;
	justify-content:center;
}
#icons {
	width:30px;
	height:200px;
	display:inline-flex;
	flex-direction:column;
}
#icons >div {
	flex:1;
	align-items:center;
	justify-content:center;
	width:60px;
	height:60px;
	overflow:hidden;
	position:relative;
}
label:active {
	position:static;
	margin-left:60px;
}
label:active::before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	wid.........完整代码请登录后点击上方下载按钮下载查看