どうも！LSSです！！
先日、
という実験的な記事を公開していました。
「実験」だったのは、今ひとつネタとして活用する方法でピンとくるアイデアがなかったからなのですが、その状態でも、
norikoさん(id:non704)や、のんべえさん(id:whisky-coke)が使い途を考えて試みてくださっています^^
その、norikoさんの記事のコメントの中で、「カーテンで舞台が開く」という新たなアイデアを出しておられたので、こっちで作ってみました^^
カーテン
今、新しい時代の幕が開ける…！！
コード
<style>
@keyframes curtaina{
0%,20%,80%,100%{background-size:100% 12000%,100% 12000%;}
40%,60%{background-size:100% 2000%,100% 2000%;}
0%,30%{background-position:0% 51%,0% 51%;}
70%,100%{background-position:0% 0%,0% 0%;}
}
.curtain{
position:relative;
width:100%;
height:100px;
text-align:center;
}
.curtain:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:
linear-gradient(to left top,#ff0000 0%,#880000 20%,#ff0000 25%,#880000 30%,#ff0000 35%,#880000 40%,#ff0000 45%,#880000 50%,#88000000 50.1%),
linear-gradient(to right top,#ff0000 0%,#880000 20%,#ff0000 25%,#880000 30%,#ff0000 35%,#880000 40%,#ff0000 45%,#880000 50%,#88000000 50.1%);
background-repeat:no-repeat;
animation:15s curtaina linear infinite alternate;
}
</style>
<div class="curtain"><br />今、新しい時代の幕が開ける…！！</div>
赤太字部分は好きな言葉に書き換えて使用できます^^
（<br/>は改行です。）
傾きについて
コード中、最初の方に書いている、
0%,20%,80%,100%{background-size:100% 12000%,100% 12000%;}
40%,60%{background-size:100% 2000%,100% 2000%;}
の「12000%」が「ほぼ垂直の状態」、「2000%」が「カーテン移動時の傾いた状態」です。
※２つづつあるのは、左右それぞれのカーテンを描いているため。
「12000%」をもっと大きい数値にするとさらに垂直に近づきますし、「2000%」をもっと小さくすると移動時により傾いた状態になります。
端末の画面幅によっても、それぞれの傾き具合が変わってくるので、PCで見た時とスマホで見た時で感じが違って見える事になりますが、「なんとかカーテンっぽく見えるかな」って数値に調整しましたｗ
divタグの中に書いたものを覆い隠すのには
:after疑似要素が便利！
上に被せるためには、
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
のように「contentを空文字ででもつけておく」「absoluteで絶対位置指定」「topとleftを0にする」「全体を覆うにはwidthとheightを100%にする」などが必要になりますが、要素を別に用意しなくていいのがいいですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
