CSS可以实现很多有趣的效果，比如一条逐渐变长的直线。下面是一个简单的实现方法：
.line {
width: 0; /* 初始宽度为0 */
height: 1px;
background-color: black;
transition: all 1s ease; /* 宽度变化时添加过渡效果 */
}
.line:hover {
width: 100px; /* 鼠标滑过时宽度变为100px */
}
以上代码中，我们首先定义了一条高度为1px、背景颜色为黑色的线，初始宽度为0。接着，我们给这条线添加了一个hover伪类，在鼠标滑过时将宽度变为100px。注意，我们在伪类中添加了一个过渡效果，使得宽度变化更加自然流畅。
通过这种方式，我们就可以轻松地实现一条逐渐变长的直线效果了。你可以根据需要自定义线条高度、颜色和宽度等属性，使得效果更加个性化。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
