渐变颜色——小练习
点击依次变色
<!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="orange">
<div class="yellow">
<div class="blue">
<div class="green"></div>
</div>
</div>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.red.active{
background: red;
}
.orange.active{
background: orange;
}
.yellow.active{
background: yellow;
}
.blue.active{
background: blue;
}
.green.active{
background: green;
}
div{
border:1px solid black;
padding:10px;
transition: all 1s;
display:flex;
flex:1;
border-radius:50%;
}
.red{
width:100vh;
height:100vh;
}
var n=0;
$('div').on('click',function(e){
setTimeout(function(){
$(e.currentTarget).addClass('active');
},n*1000) ;
n=n+1;
});
9081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
