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とかの切り替えは動作後の方に書く。
コメント