纯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