css3动画实现盒子变大

Css3动画是一种非常有趣且火热的前端技术，它可以让我们实现各种炫酷的特效。今天我们就来讲一讲如何使用css3动画实现盒子变大效果。

.Box{
     width: 100px;
     height: 100px;
     background-color: #L0C0FF;
     transition-property: width,height;
     transition-duration: 1s;
}
.Box:hover{
     width: 200px;
     height: 200px;
}

上面的代码中，我们首先定义了一个类名叫做“Box”的div，并设置了它的宽度、高度和背景颜色。接着我们用CSS3的过渡效果（transition）属性，告诉浏览器在1秒钟的时间内过渡盒子的宽度和高度。最后，我们使用:hover伪类在鼠标悬停时把盒子的宽度和高度变成200px。

运行上面的代码，你将看到当鼠标悬停在盒子上时，它会展开成一个更大的盒子。这种效果可以用在各种需要动态变化的场合，比如图片展示、菜单选项等等。