编写代码，页面加载后div逐步由正方形变化至圆形，然后再逐步由圆形形变化至正方形，重复这个过程。

可以使用CSS3的transition和border-radius属性实现这个效果，同时结合JavaScript设置定时器来实现循环。下面是一个简单的示例代码：

HTML代码：

<div id="shape"></div>

CSS代码：

#shape {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s ease;
  border-radius: 0%;
}

JavaScript代码：

var shape = document.getElementById("shape");
var radius = 0;

setInterval(function() {
  if (radius < 50) {
    shape.style.borderRadius = radius + "%";
    shape.style.width = (100 - radius * 2) + "px";
    shape.style.height = (100 - radius * 2) + "px";
    radius++;
  } else {
    shape.style.borderRadius = radius + "%";
    shape.style.width = (radius * 2 - 100) + "px";
    shape.style.height = (radius * 2 - 100) + "px";
    radius--;
  }
}, 10);

解释如下：

1. 在CSS代码中，设置了一个id为shape的div，并对其进行样式设置，其中包括了transition属性和border-radius属性。

2. 在JavaScript代码中，首先获取了id为shape的div元素，并定义了一个变量radius，用于记录当前的圆角半径。

3. 使用setInterval函数来设置定时器，每隔10毫秒执行一次匿名函数。

4. 匿名函数中，使用if语句判断当前是否处于圆形变换到正方形的过程中。如果是，则将圆角半径加1，同时修改div元素的宽度、高度和border-radius属性，以实现逐步变为正方形的效果。如果不是，则将圆角半径减1，同时修改div元素的宽度、高度和border-radius属性，以实现逐步变为圆形的效果。

5. 使用transition属性来使变换效果更加平滑，同时设置了1秒的过渡时间和ease缓动函数。

6. 最后，将整个JavaScript代码放在一个匿名函数中，并在页面加载完成后执行该函数，以确保JavaScript代码能够正确执行。