纯css实现鼠标悬浮收集金币不接触墙壁小游戏代码
代码语言:html
所属分类:游戏
代码描述:纯css实现鼠标悬浮收集金币不接触墙壁小游戏代码
代码标签: css 鼠标 悬浮 收集 金币 不接触 墙壁 游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> grid { display: grid; grid: repeat(8, 1fr)/repeat(10, 1fr); margin: 10px auto 0; position: relative; cursor: pointer; } c, w { width: 40px; aspect-ratio: 1; } c { background: radial-gradient(#f7a011 34%, #f8ce00 35% 51%, #0000 52%) 0/100% 100% no-repeat; transition: 999s 999s; } c:hover { background-size: 0 0; transition: 0s; } @property --c1 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(1) ~ result { --c1: 0; --s1: paused ; } c:nth-of-type(1):hover ~ result { --s1: running; } @keyframes c1 { to { --c1:1; } } @property --c2 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(2) ~ result { --c2: 0; --s2: paused ; } c:nth-of-type(2):hover ~ result { --s2: running; } @keyframes c2 { to { --c2:1; } } @property --c3 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(3) ~ result { --c3: 0; --s3: paused ; } c:nth-of-type(3):hover ~ result { --s3: running; } @keyframes c3 { to { --c3:1; } } @property --c4 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(4) ~ result { --c4: 0; --s4: paused ; } c:nth-of-type(4):hover ~ result { --s4: running; } @keyframes c4 { to { --c4:1; } } @property --c5 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(5) ~ result { --c5: 0; --s5: paused ; } c:nth-of-type(5):hover ~ result { --s5: running; } @keyframes c5 { to { --c5:1; } } @property --c6 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(6) ~ result { --c6: 0; --s6: paused ; } c:nth-of-type(6):hover ~ result { --s6: running; } @keyframes c6 { to { --c6:1; } } @property --c7 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(7) ~ result { --c7: 0; --s7: paused ; } c:nth-of-type(7):hover ~ result { --s7: running; } @keyframes c7 { to { --c7:1; } } @property --c8 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(8) ~ result { --c8: 0; --s8: paused ; } c:nth-of-type(8):hover ~ result { --s8: running; } @keyframes c8 { to { --c8:1; } } @property --c9 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(9) ~ result { --c9: 0; --s9: paused ; } c:nth-of-type(9):hover ~ result { --s9: running; } @keyframes c9 { to { --c9:1; } } @property --c10 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(10) ~ result { --c10: 0; --s10: paused ; } c:nth-of-type(10):hover ~ result { --s10: running; } @keyframes c10 { to { --c10:1; } } @property --c11 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(11) ~ result { --c11: 0; --s11: paused ; } c:nth-of-type(11):hover ~ result { --s11: running; } @keyframes c11 { to { --c11:1; } } @property --c12 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(12) ~ result { --c12: 0; --s12: paused ; } c:nth-of-type(12):hover ~ result { --s12: running; } @keyframes c12 { to { --c12:1; } } @property --c13 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(13) ~ result { --c13: 0; --s13: paused ; } c:nth-of-type(13):hover ~ result { --s13: running; } @keyframes c13 { to { --c13:1; } } @property --c14 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(14) ~ result { --c14: 0; --s14: paused ; } c:nth-of-type(14):hover ~ result { --s14: running; } @keyframes c14 { to { --c14:1; } } @property --c15 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(15) ~ result { --c15: 0; --s15: paused ; } c:nth-of-type(15):hover ~ result { --s15: running; } @keyframes c15 { to { --c15:1; } } @property --c16 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(16) ~ result { --c16: 0; --s16: paused ; } c:nth-of-type(16):hover ~ result { --s16: running; } @keyframes c16 { to { --c16:1; } } @property --c17 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(17) ~ result { --c17: 0; --s17: paused ; } c:nth-of-type(17):hover ~ result { --s17: running; } @keyframes c17 { to { --c17:1; } } @property --c18 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(18) ~ result { --c18: 0; --s18: paused ; } c:nth-of-type(18):hover ~ result { --s18: running; } @keyframes c18 { to { --c18:1; } } @property --c19 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(19) ~ result { --c19: 0; --s19: paused ; } c:nth-of-type(19):hover ~ result { --s19: running; } @keyframes c19 { to { --c19:1; } } @property --c20 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(20) ~ result { --c20: 0; --s20: paused ; } c:nth-of-type(20):hover ~ result { --s20: running; } @keyframes c20 { to { --c20:1; } } @property --c21 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(21) ~ result { --c21: 0; --s21: paused ; } c:nth-of-type(21):hover ~ result { --s21: running; } @keyframes c21 { to { --c21:1; } } @property --c22 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(22) ~ result { --c22: 0; --s22: paused ; } c:nth-of-type(22):hover ~ result { --s22: running; } @keyframes c22 { to { --c22:1; } } @property --c23 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(23) ~ result { --c23: 0; --s23: paused ; } c:nth-of-type(23):hover ~ result { --s23: running; } @keyframes c23 { to { --c23:1; } } @property --c24 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(24) ~ result { --c24: 0; --s24: paused ; } c:nth-of-type(24):hover ~ result { --s24: running; } @keyframes c24 { to { --c24:1; } } @property --c25 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(25) ~ result { --c25: 0; --s25: paused ; } c:nth-of-type(25):hover ~ result { --s25: running; } @keyframes c25 { to { --c25:1; } } @property --c26 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(26) ~ result { --c26: 0; --s26: paused ; } c:nth-of-type(26):hover ~ result { --s26: running; } @keyframes c26 { to { --c26:1; } } @property --c27 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(27) ~ result { --c27: 0; --s27: paused ; } c:nth-of-type(27):hover ~ result { --s27: running; } @keyframes c27 { to { --c27:1; } } @property --c28 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(28) ~ result { --c28: 0; --s28: paused ; } c:nth-of-type(28):hover ~ result { --s28: running; } @keyframes c28 { to { --c28:1; } } @property --c29 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(29) ~ result { --c29: 0; --s29: paused ; } c:nth-of-type(29):hover ~ result { --s29: running; } @keyframes c29 { to { --c29:1; } } @property --c30 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(30) ~ result { --c30: 0; --s30: paused ; } c:nth-of-type(30):hover ~ result { --s30: running; } @keyframes c30 { to { --c30:1; } } @property --c31 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(31) ~ result { --c31: 0; --s31: paused ; } c:nth-of-type(31):hover ~ result { --s31: running; } @keyframes c31 { to { --c31:1; } } @property --c32 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(32) ~ result { --c32: 0; --s32: paused ; } c:nth-of-type(32):hover ~ result { --s32: running; } @keyframes c32 { to { --c32:1; } } @property --c33 { syntax: "<integer>"; inherits: true; initial-value: 0; } c:nth-of-type(33) ~ result { --c33: 0; --s33: paused ; } c:nth-of-type(33):hover ~ result { --s33: running; } @keyframes c33 { to { --c33:1; } } @property --c34 { syntax: "<integer>"; inherits: true; initial-value: 0; }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0