2、编写代码，页面加载后div中的背景图片透明度逐渐发生变化，同时图片的宽度、高度逐渐加大，当增加至一定程度（400、300）后再次恢复原始大小（300、200），重复这个过程。 3、编写代码，页面加载后div逐步由正方形变化至圆形，然后再逐步由圆形形变化至正方形，重复这个过程。

2、实现代码：

HTML部分：

<div id="changeDiv"></div>

CSS部分：

#changeDiv {
  width: 300px;
  height: 200px;
  background-image: url("your-image-url");
  background-size: cover;
  opacity: 0.2;
  transition: all 2s ease-in-out;
}

JavaScript部分：

let div = document.getElementById("changeDiv");
let width = 300;
let height = 200;
let opacityValue = 0.2;

setInterval(() => {
  width += 5;
  height += 4;
  opacityValue += 0.05;

  if (width >= 400 && height >= 300) {
    width = 300;
    height = 200;
    opacityValue = 0.2;
  }

  div.style.width = `${width}px`;
  div.style.height = `${height}px`;
  div.style.opacity = opacityValue;
}, 100);

3、实现代码：

HTML部分：

<div id="changeDiv"></div>

CSS部分：

#changeDiv {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
  transition: all 2s ease-in-out;
}

JavaScript部分：

let div = document.getElementById("changeDiv");
let isCircle = true;

setInterval(() => {
  if (isCircle) {
    div.style.borderRadius = "0%";
    isCircle = false;
  } else {
    div.style.borderRadius = "50%";
    isCircle = true;
  }
}, 2000);