过渡效果1：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3的过渡效果</title><style>.box{width: 300px;height: 300px;/* border-radius: 50%; */background-color: sienna;transition: width 5s height 5s;}/* 过渡的时间是5s，过渡的范围是300px---500px */.box:hover{width: 500px;height: 600px;}</style></head><body><div class="box"></div></body>
</html>
旋转效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3的过渡效果</title><style>.box{width: 300px;height: 300px;/* border-radius: 50%; */background-color: sienna;/* transition: width 5s height 5s; */transform:rotate(0deg) ;transition: transform 2s;}/* 过渡的时间是5s，过渡的范围是0deg---360deg */.box:hover{width: 500px;height: 600px;transform:rotate(360deg) ;}</style></head><body><div class="box"></div></body>
</html>
背景颜色的过渡
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3的过渡效果</title><style>.box{width: 300px;height: 300px;/* border-radius: 50%; */background-color: sienna; transition: background-color 5s ;}/* 过渡的时间是5s，过渡的范围是0deg---360deg */.box:hover{ background-color: red; }</style></head><body><div class="box"></div></body>
</html>
线性变化
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3的过渡效果</title><style>.box{width: 300px;height: 300px;/* border-radius: 50%; */background-color: sienna;/* 表示线性变化 all表示所有可能的情况 */transition: all 5s linear ;}.box:hover{ transform: translate(500px,0);}</style></head><body><div class="box"></div></body>
</html>