HTML：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="red">
<div class="blue">
<div class="green">
<div class="yellow">
<div class="orange">
<div class="purple">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
*{margin:0;padding:0;box-sizing:border-box}
.red.active{
background:red;
}
.blue.active{
background:blue;
}
.green.active{
background:green;
}
.yellow.active{
background:yellow;
}
.orange.active{
background:orange;
}
.purple.active{
background:purple;
}
div{
border:1px solid black;
padding:10px;
transition:all 1s;
display:flex;
flex:1;
border-radius:50%
}
.red{
width:100vw;
height:100vw;
}
JS：
var n=1
$('div').on('click',function(e){
setTimeout(function(){
$(e.currentTarget).addClass('active')
},n*500)
n+=1
})
效果图：
2019-09-24_221940.png
网友评论