乒乓球小游戏
代码语言:html
所属分类:游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --text-color: #646B8C; --headline-color: #2B3044; --mail: #555B77; --mail-triangle: #494F69; --mail-background: #404660; --mail-shadow: #D1D6EE; --paper: #fff; --paper-border: #D1D6EE; --confirm-color: #fff; --confirm-background: #275EFE; --game-paddle: #404660; --game-ball: #275EFE; --controls-text: #646B8C; --controls-icon: #646B8C; --controls-background: #E1E6F9; } #unsubscribe button, #game button { outline: none; border: none; display: table; margin: 0 auto; font-size: 14px; font-weight: 500; font-family: inherit; padding: 8px 20px; line-height: 21px; border-radius: 7px; cursor: pointer; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } #unsubscribe .letter { width: 84px; height: 72px; margin: 0 auto 32px auto; position: relative; -webkit-animation: letter 2s ease infinite; animation: letter 2s ease infinite; } #unsubscribe .letter:before, #unsubscribe .letter:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 48px; z-index: 1; } #unsubscribe .letter:before { background: var(--mail); -webkit-clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); } #unsubscribe .letter:after { background: var(--mail-triangle); -webkit-clip-path: polygon(0 100%, 50% 55%, 100% 100%); clip-path: polygon(0 100%, 50% 55%, 100% 100%); } #unsubscribe .letter .background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--mail-background); -webkit-clip-path: polygon(0 24px, 50% 0, 100% 24px, 100% 100%, 0 100%); clip-path: polygon(0 24px, 50% 0, 100% 24px, 100% 100%, 0 100%); } #unsubscribe .letter .shadow { background: black; width: 92px; height: 4px; border-radius: 50%; position: absolute; top: 108%; left: -4px; background: var(--mail-shadow); -webkit-animation: shadow 2s ease infinite; animation: shadow 2s ease infinite; } #unsubscribe .letter .body { width: 360px; height: 260px; bottom: 0; left: -138px; border-radius: 1px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-border); position: absolute; -webkit-transform: translateY(36%) translateZ(0) scale(0.2, 0.16) rotate(90deg); transform: translateY(36%) translateZ(0) scale(0.2, 0.16) rotate(90deg); } #unsubscribe .letter .body .game { width: 360px; height: 260px; position: relative; -webkit-transition: opacity .3s ease .8s; transition: opacity .3s ease .8s; } #unsubscribe .letter .body .game .headline { position: absolute; left: 0; right: 0; top: -32px; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; -webkit-transform: translateZ(0); transform: translateZ(0); } #unsubscribe .letter .body .game .headline span { color: var(--headline-color); font-size: 16px; font-weight: 600; line-height: 24px; } #unsubscribe .letter .body .game .headline .close { cursor: pointer; } #unsubscribe .letter .body .game .headline .close svg { width: 20px; height: 20px; display: block; fill: var(--text-color); padding: 2px; } #unsubscribe .letter .body .game .paddle, #unsubscribe .letter .body .game .ball { top: 0; position: absolute; -webkit-transition: opacity .3s; transition: opacity .3s; -webkit-transform: translate(var(--x, 0), var(--y, 0)); transform: translate(var(--x, 0), var(--y, 0)); } #unsubscribe .letter .body .game .paddle { width: 6px; height: 48px; border-radius: 3px; --y: 106px; background: var(--game-paddle); } #unsubscribe .letter .body .game .paddle.one { left: 0; } #unsubscribe .letter .body .game .paddle.two { right: 0; } #unsubscribe .letter .body .game .ball { background: var(--game-ball); border-radius: 50%; width: 16px; height: 16px; left: 0; } #unsubscribe .letter .body .game .controls { bottom: -80px; left: 0; right: 0; position: absolute; } #unsubscribe .letter .body .game .controls span { display: block; text-align: center; margin-bottom: 12px; font-size: 14px; font-weight: 500; color: var(--controls-text); } #unsubscribe .letter .body .game .controls div { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } #unsubscribe .letter .body .game .controls div button { width: 64px; padding: 8px 0; margin: 0; background: var(--controls-background); } #unsubscribe .letter .body .game .controls div button:not(:last-child) { margin-right: 16px; } #unsubscribe .letter .body .game .controls div button svg { width: 20px; height: 20px; display: block; margin: 0 auto; fill: var(--controls-icon); } #unsubscribe .letter .body .game .start { position: absolute; text-align: center; white-space: nowrap; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .3s; transition: opacity .3s; } #unsubscribe .letter .body .game .start button { color: var(--confirm-color); background: var(--confirm-background); } #unsubscribe .letter .body .game .start small { margin: 4px 0 0 0; display: block; font-style: italic; font-size: 12px; color: var(--text-color); } #unsubscribe .letter .body .game:not(.idle) .start { opacity: 0; pointer-events: none; } #unsubscribe .letter .body .game:not(.init) .ball { opacity: 0; } #unsubscribe h1 { text-align: center; margin: 0 0 8px 0; font-family: inherit; font-weight: 600; font-size: 24px; color: var(--headline-color); } #unsubscribe p { text-align: center; margin: 0; font-size: 16px; color: var(--text-color); } #unsubscribe .cta { margin-top: 32px; } #unsubscribe .cta button { color: var(--confirm-color); background: var(--confirm-background); } #unsubscribe:not(.show-game) .letter .body .game { opacity: 0; pointer-events: none; -webkit-transition-delay: 0s; transition-delay: 0s; } #unsubscribe.show-game .letter { -webkit-animation-play-state: paused; animation-play-state: paused; } #unsubscribe.show-game .letter .body { -webkit-animation: paper .8s linear forwards; animation: paper .8s linear forwards; } #unsubscribe.show-game .letter .shadow { -webkit-animation-play-state: paused; animation-play-state: paused; } #unsubscribe.hide-game .letter .body { -webkit-animation: paper-back .8s linear forwards; animation: paper-back .8s linear forwards; } @-webkit-keyframes paper { 30% { z-index: 0; -webkit-transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg); transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg); } 60%, 100% { z-index: 2; } 60% { -webkit-transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg); transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg); } 100% { -webkit-transform: translateY(63%) translateZ(0); transform: translateY(63%) translateZ(0); } } @keyframes paper { 30% { z-index: 0; -webkit-transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg); transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg); } 60%, 100% { z-index: 2; } 60% { -webkit-transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg); transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg); } 100% { -webkit-transform: translateY(63%) translateZ(0); transform: translateY(63%) translateZ(0); } } @-webkit-keyframes paper-back { 0% { -webkit-transform: translateY(63%) translateZ(0); transform: translateY(63%) translateZ(0); } 30% { -webkit-transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg); transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg); } 60% { z-index: 0; -webkit-transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg); transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg); } 0%, 30% { z-index: 2; } 100% { -webkit-transform: translateY(36%) translateZ(0) scale(0.2, 0.16) rotate(90deg); transform: translateY(36%) translateZ(0) scale(0.2, 0.16) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0