[css]縦の棒がスライドしてる感じに見えるアニメーション

scrollリンクとかの装飾

イメージ

ファーストビューぴったりに画像とかを配置して、下にスクロールできるよって案内するときのアレ。

サンプル

<div class="scroll"><a href="#">SCROLL</a></div>
.scroll a{
    width: 30px;
    height: 120px;
    display: block;
    color: #333;
    text-decoration: none;
    line-height: 30px;
    position: relative;
}
.scroll a::before{
    content: '';
    width: 1px;
    background: #111;
    display: block;
    position: absolute;
    animation: scroll 5s infinite;
}
@keyframes scroll{
    0%{ height: 0; top: 0; bottom: auto;}
    5%{ height: 100%;}
    95%{ height: 100%;}
    100%{ height: 0; top: auto; bottom: 0;}
}

absoluteの設定をどうするかのメモでもある。

伸ばすときはいいんだけど縮める時に注意。topとかの切り替えは動作後の方に書く。

コメント

タイトルとURLをコピーしました