<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
</head>
<style>
body{
background: darkgray;
}
#all{
width: 500px;
height: 500px;
background-color: red;
border-radius: 250px;
float: left;
}
#all2{
width: 500px;
height: 500px;
background-color: red;
border-radius: 250px;
float: right;
}
</style>
<body>
<div id="all">
</div>
<div id="all2">
</div>
<script>
var a=1;
setTimeout(function(){
fun(a+5);
}, 1)
function fun(a){
setTimeout(function(){
$('#all').css("background","rgb("+a+",100,200)");
$('#all').css("margin-top",a+"px");
$('#all').css("margin-left",a+"px");
$('#all').css("width",500-2*a+"px");
$('#all').css("height",500-2*a+"px");
$('#all').css("border-radius",500-a+"px");
$('#all2').css("background","rgb("+a+",100,200)");
$('#all2').css("margin-top",a+"px");
$('#all2').css("margin-right",a+"px");
$('#all2').css("width",500-2*a+"px");
$('#all2').css("height",500-2*a+"px");
$('#all2').css("border-radius",500-a+"px");
if(a>250)a=1;
fun(a+5);
}, 1)
}
</script>
</body>
</html>
