代码解读

    定义dom，容器中包含2个元素，分别代表2条轨道：

    <divclass="container">

    <spanclass='track'></span>

    <spanclass='track'></span>

    </div>

    居中显示：

    body{

    margin:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background-color:#999;

    }

    定义容器尺寸和子元素的布局方式：

    .container{

    font-size:30px;

    width:calc(13em+0.5em);

    height:8em;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    }

    定义2个色值，一个亮的和一个暗的：

    .container{

    --dark:#222;

    --light:#ddd;

    }

    画出2条轨道的轮廓：

    .track{

    width:inherit;

    height:2em;

    border:1pxsolidvar(--dark);

    }

    为2条轨道的背景图案，图案是明暗相间的条纹，但第2条轨道要错半个格：

    .track{

    background:linear-gradient(

    90deg,

    var(--dark)50%,

    var(--light)50%

    );

    background-size:1em;

    }

    .track:nth-child(2){

    background-position:0.5em;

    }

    用伪元素画出2个矩形：

    .track{

    position:relative;

    display:flex;

    align-items:center;

    }

    .track::before{

    content:'';

    position:absolute;

    width:2em;

    height:0.8em;

    background-color:var(--light);

    }

    让这2个矩形在轨道上往复移动：

    .track::before{

    animation:move5slinearinfinitealternate;

    }

    @keyframesmove{

    from{

    left:0;

    }

    to{

    left:calc(100%-2em);

    }

    }

    此时，两个矩形看起来是一先一后地前进的，但实际上它们是在同一时刻开始并且以相同的速度在移动。接下来我们来揭秘真相。

    在dom中增加一个子元素，作为按钮；

    <pclass="container">

    <spanclass='track'></span>

    <spanclass='track'></span>

    <spanclass="toggle">Showmethetruth</span>

    </p>

    设置按钮的样式：

    .toggle{

    order:-1;

    width:10em;

    height:2em;

    border:2pxsolidvar(--dark);

    border-radius:0.2em;

    font-size:0.5em;

    font-family:sans-serif;

    font-weight:bold;

    color:black;

    text-align:center;

    line-height:2em;

    cursor:pointer;

    user-select:none;

    }

    为按钮设置与轨道风格类似的背景，以及鼠标悬停效果：

    .toggle{

    background-image:linear-gradient(toright,#ddd50%,#99950%);

    background-size:1em;

    transition:0.5s;

    }

    .toggle:hover{

    background-position:5em;

    }

    增加一段点击按钮时触发的脚本，为轨道元素切换样式：

    let$toggle=document.getElementsByClassName('toggle')[0]

    let$tracks=Array.from(document.getElementsByClassName('track'))

    $toggle.addEventListener('click',function(){

    $tracks.forEach(track=>track.classList.toggle('highlights'))

    })

    终于，谜底就在切换样式之后被揭晓了：

    .track::before{

    box-sizing:border-box;

    border:solidvar(--dark);

    border-width:0;

    }

    .track.highlights::before{

    background-color:white;

    border-width:0.1em;

    }

    大功告成！






本文转载自中文网