css慢慢变长的线 |div css html

.line {
width: 0; /* 初始宽度为0 */
height: 1px; /* 高度可以按需求修改 */
background-color: #000; /* 线条颜色 */
transition: width 0.5s ease; /* 过渡效果，可以控制速度 */
}

以上是制作慢慢变长的线的CSS样式，大家使用了transition属性来实现过渡效果，而width属性则可以控制线条的宽度。接下来，大家可以用JavaScript来控制线条的展开动画效果。

const line = document.querySelector('.line');
line.style.width = '100%'; /* 控制宽度展开 */
/* 如果需要逐步展开动画效果，则可以使用setInterval函数循环设置样式 */
let width = 0;
const animation = setInterval(() =>{
width++;
line.style.width = width + '%';
if (width === 100) {
clearInterval(animation);
}
}, 10);

这段JavaScript实现了线条展开动画效果，大家使用了setInterval函数来循环设置样式，逐渐增加线条的宽度，直到100%为止。这里的10表示每10毫秒才执行一次循环，可以根据需要进行修改调整速度。

综上所述，大家可以使用CSS和JavaScript来实现一个慢慢变长的线条，这是一个简单而实用的UI效果，可以为大家的网页带来不同寻常的感觉。