线条拼图接通小游戏

代码语言:html

所属分类:游戏

代码描述:线条拼图接通小游戏

代码标签: 小游戏

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
ul{
  display:block;
  width:500px;
  height:500px;
  list-style:none;
  
  transform:translateZ(0);
}

li{
  position:relative;
  
  display:block;
  float:left;
  
  background:rgba(60,60,60,1);
  
  width:50px;
  height:50px;
  
  border-radius:100%;
    
  overflow:hidden;
}

li:before{
  position:absolute;
  content:'';
  
  width:50px;
  height:50px;
  
  top:22px;
  left:22px;
  border:5px solid white;
  width:inherit;
  height:inherit;
  border-radius:40%;
  
  box-sizing:border-box;
}

[data-state='1'], [data-state='2'], [data-state='3'], [data-state='4'], li{
    animation:turn .5s forwards;
}
[data-state='2']{
    animation-name:turn1;
}
[data-state='3']{
    animation-name:turn2;
}
[data-state='4']{
    animation-name.........完整代码请登录后点击上方下载按钮下载查看

网友评论0