纯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):ho.........完整代码请登录后点击上方下载按钮下载查看
网友评论0