css3长度过度

过度效果一直是设计中不可或缺的一部分，通过过度效果可以让页面变得更加美观生动，CSS3的长度过度也为此提供了更多的可能性。

      /* css代码 */
     .Box{
         width: 100px;
         height: 100px;
         background-color: #ddd;
         transition: width 1s ease-in-out;
     }
     .Box:hover{
         width: 200px;
     }
 

length类型过度可以更加自然地模拟物体的运动过程，为页面增添更多动态感。上面的代码中，我们设置了一个长度为100px的盒子，当鼠标滑动到盒子上时，盒子的长度过度到200px的长度，过度的时间为1秒，并且过度效果是可以自定义的。

不仅如此，我们还可以使用多个长度过度属性同时过度，例如过度盒子的高度和宽度：

    /* css代码 */
     .Box{
         width: 100px;
         height: 100px;
         background-color: #ddd;
         transition: width 1s ease-in-out,height 2s ease-in-out;
     }
     .Box:hover{
         width: 200px;
         height: 200px;
     }
 

在上面的代码中我们设置了两个过度属性，分别是盒子的宽度和高度，当鼠标滑动到盒子上时，盒子的宽度和高度同时过度到200px的长度和高度，并且过度时间也可以自定义。

总之，CSS3的长度过度为网页设计提供了更加灵活的设计方式，可以让页面更加生动、自然，是不可替代的设计工具。