css动画盒子变大 |css写出镜面的感觉

.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s, height 1s;   /* 动画效果设置 */
}
.box:hover {
width: 200px;   /* 鼠标放上去，宽度变为200px */
height: 200px;  /* 鼠标放上去，高度变为200px */
}

大家定义了一个宽高为100px的盒子，并将其背景色设置为蓝色。通过设置transition属性，大家使得宽度和高度的变化过程有一个1秒的渐变效果。然后，当大家将鼠标悬浮在盒子上时，将宽高分别设置为200px，这样就产生了一个从100px到200px的过渡动画。

除了使用:hover伪类触发盒子变大，大家还可以使用JavaScript代码来触发它：

var box = document.querySelector('.box');
box.addEventListener('click', function(){
this.style.width = '200px';
this.style.height = '200px';
});

这个代码片段中，大家通过querySelector方法选中一个带有box类名的元素，并绑定了一个点击事件。然后在点击事件中，大家将盒子的宽度和高度分别设置为200px，这样就可以看到一个由小到大的缓动动画。

总的来说，CSS动画可以为网页增添更多视觉上的元素，盒子变大只是其中之一。如果您还想学习更多的CSS动画效果，可以搜索相关的资料，再以理论为基础，通过不断练习实践，开发出更加吸引人的网页。