js+css实现简单与电脑做石头剪刀布游戏代码
代码语言:html
所属分类:其他
代码描述:js+css实现简单与电脑做石头剪刀布游戏代码
代码标签: js css 简单 电脑 石头 剪刀 布 游戏 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); /*Color Variables*/ /*Base*/ /* GLOBAL */ /* SELECTIONS */ /* BUTTON */ /* RESULTS */ body { height: 100vh; width: 100vw; margin: 0; display: grid; place-content: center; background: #ffbe0b; font-family: "Montserrat", sans-serif; } body .selections { display: grid; grid-template-columns: repeat(3, auto); } body .selections .option { padding: 0.75rem; margin: 0.5rem 1rem; display: grid; place-content: center; font-size: 4rem; border: 1px solid #ffbe0b; border-radius: 5px; background-color: #ffbe0b; transition: all 250ms ease-in-out; } body .selections .option input { display: none; } body .selections .option label { color: white; } body .selections .option input:checked + label { color: #ffbe0b; } body .selections .option label span { display: none; font-size: 1rem; text-align: center; } body .selections .option:has(input:checked) { background-color: #ff006e; } body .selections .option:hover label { color: #ff006e; } body .button { width: 100%; padding: 1rem; } body .button button { transition: all 150ms ease-in-out; background-color: #dadada; color: #a5a5a5; width: 100%; height: 50px; border-radius: 10px; border: 1px solid #a5a5a5; box-shadow: 6px 6px 0px #a5a5a5; font-size: 1.25rem; } body .button button:enabled { color: #FFFFFF; background-color: #8338ec; border: 1px solid #8b9ebc; box-shadow: 4px 4px 0px #a5a5a5, 8px 8px 0px #8b9ebc; } body .button button:enabled:hover { box-shadow: 3px 3px 0px #8b9ebc; } body .button button:enabled:active { box-shadow: 1px 1px 0px #8b9ebc; } body .all-results { width: 100%; } body .all-results div { text-align: center; } body .all-results .player-result { padding: 1rem 0.5rem; border-bottom: 1px dashed blue; } body .all-results .player-result .result-hed, body .all-results .player-result .result-label { display: inline; } body .all-results .player-result .result-hed { color: black; font-weight: 600; } body .all-results .player-result .result-label { color: black; font-weight: 400; } body .all-results .game-result { grid-column: 1/span 2; text-align: center; } body .all-results .game-result p { font-size: 1.25rem; } </style> </head> <body translate="no"> <head> <script src="https://kit.fontawesome.com/eb9904d90c.js" crossorigin="anonymous"></script> </head> <body> <div class="selections"> <div class="option" id="option_rock"> <input type="radio" id="rock" name="choice" value="rock"> <label for="rock"> <i class="fa-regular fa-hand-back-fist"></i> <span> Rock </span> </label> </div> <div class="option" id="option_paper"> <input type="radio" id="paper" name="choice" value="paper"> <label for="paper"><i class="fa-regular fa-hand"></i> <span> Paper </span> </label> </div> <div class="option" id="option_scissors"> <input type="radio".........完整代码请登录后点击上方下载按钮下载查看
网友评论0