div+css实现一个双人对打乒乓球小游戏代码
代码语言:html
所属分类:游戏
代码描述:div+css实现一个双人对打乒乓球小游戏代码,全程无js代码,纯粹靠css代码实现这个游戏。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { font-size: 1vh; } body { margin: 0; background: #073B4C; font-family: "Consolas"; color: #000; } body > div { width: 56rem; max-width: 100%; height: 100rem; margin: auto; position: absolute; overflow: hidden; background: #3dc1ec; left: 0; right: 0; top: 0; display: flex; } body > div > div { width: 100%; height: 100%; transform: translate3d(0, -8rem, 0) scale(0.9); } body div > div *:not(label), body div > div *:before, body div > div *:after, body sig *:not(label), body sig *:before, body sig *:after, body player1 *:not(label), body player1 *:before, body player1 *:after { box-sizing: border-box; position: absolute; content: ""; left: 0; top: 0; } .table { width: 30rem; height: 30rem; border: 0.5rem solid #222E35; bottom: 0; right: 0; margin: auto; background: linear-gradient(90deg, #fff 14rem, #222E35 14rem, #222E35 14.5rem, #fff 14.5rem); box-shadow: 0 10rem 0 rgba(34, 46, 53, 0.1); } .table:before { height: 12rem; border-left: 0.5rem solid #222E35; border-right: 0.5rem solid #222E35; width: 28rem; transform: translate3d(0.5rem, 29.5rem, 0); } .table:after { border: 0.5rem solid #222E35; height: 4rem; width: 32rem; transform: translate3d(-1.5rem, 11rem, 0); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.5rem, #222E35 0.5rem, #222E35 0.8rem), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 0.5rem, #222E35 0.5rem, #222E35 0.8rem); } ball, player1 > u > u:nth-of-type(2) u:nth-of-type(3):before, player2 > u > u:nth-of-type(2) u:nth-of-type(3):before { width: 2rem; height: 2rem; transform: translate3d(31rem, 50rem, 0); background: #fff; border: 0.5rem solid #222E35 !important; border-radius: 50%; opacity: 0; } body > div > label { height: 100%; width: 50%; cursor: pointer; position: absolute; top: 0; font-size: 3rem; } body > div > label:after { padding: 0.5rem; background: #fff; transform: translate3d(1rem, 30rem, 0); position: absolute; top: 0; left: 0; } body > div > label:before { content: ""; border-radius: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } body > div > label:hover:before { background: rgba(255, 255, 255, 0.05); } .ll { left: 0; } .lr { right: 0; } dialog1, dialog2, dialog3 { position: absolute; left: 0; top: 0; } dialog1, dialog2, dialog3 { /* display: none !important;*/ width: 100%; height: 100%; text-align: center; font-size: 3rem; background: #06D6A0; background: linear-gradient(#06D6A0, #118AB2); display: block; padding: 4rem; box-sizing: border-box; transition: all 0.5s 0.5s cubic-bezier(0.02, 0.47, 0.53, 1.32); letter-spacing: -0.025em; } dialog1 h1, dialog2 h1, dialog3 h1 { line-height: 1em; } dialog1 player1, dialog2 player1, dialog3 player1 { position: relative; transform: none; height: 28rem; display: block; width: 2rem; margin: auto; } dialog1 label, dialog2 label, dialog3 label { background: #000; display: inline-block; color: #fff; padding: 1rem 2rem; } dialog1 label, dialog2 label, dialog3 label { cursor: pointer; } dialog1 label:hover, dialog2 label:hover, dialog3 label:hover { background: #073B4C; } dialog2 { transform: translate3d(0, -100%, 0); background: linear-gradient(rgba(239, 71, 111, 0.3), rgba(243, 118, 148, 0.9)), #073B4C; padding: 6rem 4rem; } dialog3 { transform: translate3d(0, -100%, 0); } @keyframes remove-overlay { 100% { transform: translate3d(0, -100%, 0); } } .clear-start:checked ~ div > dialog1 { transform: translate3d(0, -100%, 0); } #miss-left:checked ~ div > dialog2, #miss-right:checked ~ div > dialog2 { transform: translate3d(0, 0, 0); } #miss-right:checked ~ div > .mr:before, #miss-left:checked ~ div > .ml:before { box-shadow: inset 0 0 20rem rgba(239, 71, 111, 0.5); -webkit-mask-image: linear-gradient(rgba(255, 255, 255, 0), #fff, #fff); } #serve-left:checked ~ div > dialog2, #serve-right:checked ~ div > dialog2 { animation: miss-delay 0.25s 2.5s linear forwards; } @keyframes miss-delay { 100% { transform: translate3d(0, 0, 0); } } @keyframes miss-delay2 { 100% { transform: translate3d(0, 0, 0); } } #ls-hit-left-right:checked ~ div > dialog2, #ls-hit-left-right-2:checked ~ div > dialog2, #ls-hit-right-left-2:checked ~ div > dialog2, #ls-hit-right-left-3:checked ~ div > dialog2, #rs-hit-right-left:checked ~ div > dialog2, #rs-hit-right-left-2:checked ~ div > dialog2, #rs-hit-left-right-2:checked ~ div > dialog2, #rs-hit-left-right-3:checked ~ div > dialog2 { animation: miss-delay2 0.25s 2.5s linear forwards; } #ls-hit-right-left:checked ~ div > dialog2, #ls-hit-right-right:checked ~ div > dialog2, #ls-hit-left-right-3:checked ~ div > dialog2, #ls-hit-left-left:checked ~ div > dialog2, #rs-hit-left-right:checked ~ div > dialog2, #rs-hit-left-left:checked ~ div > dialog2, #rs-hit-right-left-3:checked ~ div > dialog2, #rs-hit-right-right:checked ~ div > dialog2 { animation: miss-delay 0.25s 2.5s linear forwards; } input { margin: 0.5rem 0.5rem 0.5rem 1rem; transform: translate3d(0, 0.25rem, 0); } input + span { color: #118AB2; font-size: 0.9rem; } @media (max-width: 1250px) { input, input + span { display: none; } } .in-play:checked ~ div > [for=serve-left], .in-play:checked ~ div > [for=serve-right] { display: none; } small { font-size: 1.5rem; } #win-left:checked ~ div > dialog3, #win-right:checked ~ div > dialog3 { animation: miss-delay 0.5s 5s linear forwards; } sig { position: absolute; right: 1rem; bottom: 1rem; font-size: 0.5rem; color: #000; width: 10em; transform: skewX(10deg) scaleY(0.45) rotate(2deg); } sig, sig * { height: 9.25em; overflow: hidden; border-radius: 0.5em; } sig:before, sig *:before { content: ""; position: absolute; top: 0; left: 0; width: 5em; height: 5em; background: currentColor; transform: translate3d(-2.5em, 0, 0) rotate(-45deg); box-shadow: -3em 3em 0 0 currentColor; border-radius: 0.5em 2em 0.5em 2em; } sig * { width: 5em; transform: translate3d(3.75em, 0, 0) scaleY(0.95); display: block !important; } sig *:before { transform: translate3d(-3em, -2em, 0) rotate(-45deg); box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor; border-radius: 0.5em; } a:hover sig, a:focus sig { color: #fff; } @keyframes movemiss { 0%, 100% { transform: scale(0); } } @keyframes movemiss2 { 0%, 100% { transform: scale(0); } } .hl:checked ~ div > .ml, .hr:checked ~ div > .mr { animation: movemiss 0.4s 1.4s linear; } .hlh:checked ~ div > .ml, .hrh:checked ~ div > .mr { animation: movemiss 0.3s 1.5s linear; } #ls-hit-right-left:checked ~ div > .l1 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-left-right-2:checked ~ div > .r1 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-right-right:checked ~ div > .r2, #ls-hit-right-right:checked ~ div > .r1, #ls-hit-right-right:checked ~ div > .mr { animation: movemiss2 0.4s 1.4s linear; } #ls-hit-right-left-2:checked ~ div > .l1, #ls-hit-right-left-2:checked ~ div > .l2 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-left-right-3:checked ~ div > .r1, #ls-hit-left-right-3:checked ~ div > .r2, #ls-hit-left-right-3:checked ~ div > .r3 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-right-left-3:checked ~ div > .l1, #ls-hit-right-left-3:checked ~ div > .l2, #ls-hit-right-left-3:checked ~ div > .l3 { animation: movemiss 0.4s 1.4s linear; } #ls-hit-left-left:checked ~ div > .l1, #ls-hit-left-left:checked ~ div > .l2, #ls-hit-left-left:checked ~ div > .l3, #ls-hit-left-left:checked ~ div > .l4, #ls-hit-left-left:checked ~ div > .ml { animation: movemiss2 0.4s 1.4s linear; } .rscb:checked ~ div > .ls { display: none; } #rs-hit-left-right:checked ~ div > .r1 { animation: movemiss 0.4s 1.4s linear; } #rs-hit-right-left-2:checked ~ div > .l1 { animation: movemiss 0.4s 1.4s linear; } #rs-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0