纯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