css3过渡

CSS3过渡是一个强大的工具，可以让网页设计师创建动态效果，而无需使用Flash或JavaScript。要使用CSS3过渡，你需要指定要过渡的CSS属性，过渡的持续时间，以及时间函数。

以下是一些使用CSS3过渡的方法：

1. 使用hover效果：

HTML:

<div class="box"></div>

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}
 
.box:hover {
  width: 200px;
}

在这个例子中，当鼠标悬停在div上时，宽度会在一秒钟内从100px变为200px。

2. 使用JavaScript触发过渡：

HTML:

<div id="box" class="box"></div>
<button onclick="change()">Change</button>

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}

JavaScript:

function change() {
  document.getElementById('box').style.width = '200px';
}

在这个例子中，当按钮被点击时，宽度会在一秒钟内从100px变为200px。

3. 使用多个属性的过渡效果：

HTML:

<div id="box" class="box"></div>
<button onclick="change()">Change</button>

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s, height 1s, background-color 1s;
}

JavaScript:

function change() {
  document.getElementById('box').style.width = '200px';
  document.getElementById('box').style.height = '200px';
  document.getElementById('box').style.backgroundColor = 'blue';
}

在这个例子中，当按钮被点击时，宽度、高度和背景颜色会在一秒钟内改变。

注意：过渡效果可以应用于任何可以动态更改的CSS属性。但并非所有的属性都会产生良好的视觉效果，例如，display 或 opacity 属性的变化通常会产生最佳的视觉效果。