css由小变大效果 |css元素靠右

代码如下：
/* HTML部分 */
<div class="box">这是一个文本框</div>
/* CSS部分 */
.box {
width: 100px;
height: 30px;
background-color: #ccc;
text-align: center;
line-height: 30px;
cursor: pointer;
transition: all 0.3s ease-in-out; /* 这一行是关键，规定了变化的时间和方式 */
}
.box:hover {
width: 120px;
height: 40px;
background-color: #f00;
color: #fff;
}

在这段代码中，有一个关键的CSS属性：transition。它规定了元素变化的时间和方式，因此可以实现由小变大的效果。在这里，大家将所有元素属性在0.3秒内渐变，使得由小变大的过程更加自然。

通过这种方式，大家可以轻松地实现由小变大的效果，并且可以根据需要来调整元素变化的时间和方式。当你制作网页时，可以使用这种技巧来让页面更加生动、有趣。