CSSメモ

動きのある見出し

動きのある見出し

線に動きをつくる。
今回は、クラスを与えたタグの中に表示する文字をspanタグで括る。

<div class="leading"><span>Station</span></div>

結果

Station

設定

.leading {

    // 設定
    /// 駅の背景色
    $station : white;
    /// レール色
    $rail-color : black;
    /// レール太さ
    $rail-height : 1px;
    /// 電車高さ
    $train-height : 2px;
    /// 電車幅
    $train-size : 100px;
    /// 電車色
    $train-color : blue;
    /// 動作時間
    $train-interval : 2s;

    // クラスを与えたタグは相対位置
    position:relative;

    // 駅
    span {
        display:inline-block;
        padding-right: 1em;
        background-color: $station;
    }
    // 共通
    &::before, &::after {
        content:"";
        display:block;
        position: absolute;
        top:50%;
        left:0;

    }
    // レール
    &::before {
        width:100%;
        height:1px;
        background-color:$rail-color;
        z-index:-2;
    }
    // 電車
    &::after {
        width:$train-size;
        height:$train-height;
        background-color:$train-color;
        z-index:-1;
        animation: train $train-interval linear infinite;
    }
    // 電車の動き
    @keyframes train {
        from { left: 0px; }
        to { left: calc(100% - $train-size); }
    }
}