css3鼠标移动变短 |css手机英文断句

css after事件，css平台登录界面，jquery ui css的cdn，css实现直角长度边框，css怎么弄图片重合，css鼠标经过时的动画，css手机英文断句 css3鼠标移动变短 |css手机英文断句

.box {
width: 200px;
height: 200px;
background-color: #ccc;
transition: height 0.5s ease;
}
.box:hover {
height: 100px;
}

解释一下上面的代码：

.box是一个类名，表示一个具有宽度和高度的盒子，背景颜色为灰色。在它身上应用了transition属性，表示当height属性值改变时，动画效果的持续时间为0.5秒，动画方式是缓慢的。在.box:hover的样式中，让height属性的值从原来的200px变为100px，产生缩短的效果。

此外，大家还可以根据需要改变宽度，或者同时改变宽度和高度，达到更加灵活的效果。示例代码如下：

.box {
width: 200px;
height: 200px;
background-color: #ccc;
transition: width 0.5s ease, height 0.5s ease;
}
.box:hover {
width: 100px;
height: 100px;
}

这段代码与上面的区别是多了一个width属性，它的作用是控制盒子的宽度，与height属性相似。在.box:hover的样式中，同时改变width和height属性的值，达到同时缩小的效果。

总之，CSS3鼠标移动变短是一种比较简单的动态效果，通过transition属性和:hover伪类选择器的配合使用，可以轻松实现。需要注意的是，transition属性需要与改变的属性绑定在一起，否则动画效果将不会产生。