纯css实现鼠标悬浮收集金币不接触墙壁小游戏代码-html代码-BFW代码库

纯css实现鼠标悬浮收集金币不接触墙壁小游戏代码

代码语言：html

所属分类：游戏

代码描述：纯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;
  }
}
@p.........完整代码请登录后点击上方下载按钮下载查看