HTML滑動線是一種常見的網頁設計效果，它可以為網頁增添動感和活力。要實現這種效果，我們可以使用CSS3中的transition屬性和transform屬性。下面是實現HTML滑動線效果的代碼示例：

<style>
.slide-line {
height: 3px;
background: #000;
position: relative;
transition: transform 0.2s ease-in-out;
}
.slide-line::before {
content: "";
width: 30px;
height: 3px;
background: #000;
position: absolute;
left: -30px;
top: 0;
}
.slide-line::after {
content: "";
width: 30px;
height: 3px;
background: #000;
position: absolute;
right: -30px;
top: 0;
}
.slide-line.active {
transform: scaleX(0);
transition: transform 0.2s ease-in-out;
}
</style>
<p>在HTML中，我們可以通過如下的代碼添加滑動線效果：</p>
<p><span class="slide-line"></span></p>
<p>為了讓滑動線有動態效果，我們還需要使用JavaScript來監聽某個事件（如按鈕點擊）并添加或刪除“active”class：</p>
<p><code>var line = document.querySelector('.slide-line');<br>
var button = document.querySelector('button');<br>
button.addEventListener('click', function() {<br>
line.classList.toggle('active');<br>
});</code></p>
<p>請注意，在CSS中，我們需要使用“::before”和“::after”偽元素來實現滑動線的兩端效果。同時，我們還需要使用“position: relative”和“position: absolute”來控制元素的位置。</p>