纯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