どうも！LSSです！！
だいぶ前から「なんとなく雰囲気だけ」のCSSアニメーション案で、雰囲気だけでどんな見た目にするかとか思いつかずにいる案があったりします。
その雰囲気というのも「ウィーン、ガシャン、って感じの」というだけｗ
「動」と「静」の組み合わせでメカっぽい動き…ですね。
どんな見た目にするかアイデアが浮かびませんが、なんとなく雰囲気だけ、お伝えしてみようと試みる記事です。
ウィーン、ガシャン。
いやぁ、以前からなんとなく
「ウィーン、ガシャンって感じのCSSを作ってみたい」
と思っていたのを、カタチにしてみた感じですが、これをカッコよく応用できないかなぁ？
コード
<style>
@keyframes wga{
0%,23%{background-position:0px 0px,0px 0px;}
25%,48%{background-position:25px 0px,0px 0px;}
50%,73%{background-position:25px 0px,-25px 0px;}
75%,98%{background-position:25px 25px,-25px 0px;}
100%{background-position:25px 25px,-25px -25px;}
}
.weengashan{
width:300px;
border-radius:25px;
border:5px double #88dd88;
padding:25px;
background-image:conic-gradient(#cceecc 90deg,transparent 90deg),conic-gradient(from 180deg,#cceecc 90deg,transparent 90deg);
background-size:50px 50px;
animation:wga linear 20s infinite;
}
</style>
<div class="weengashan">なんだかよくわからないものを作ってみました。<br />いやぁ、以前からなんとなく<br />「ウィーン、ガシャンって感じのCSSを作ってみたい」<br />と思っていたのを、カタチにしてみた感じですが、これをカッコよく応用できないかなぁ？</div>
概要
background-imageにgradient（今回の例ではconic-gradientを使用）で描いた複数の図形を、background-positionプロパティをキーフレームアニメーションで動かしてみました。
0%,23%{background-position:0px 0px,0px 0px;}
によって、時間的に0%から23%経過までは２つの図形ともに「右 0px、下 0px」の位置を取り、
25%,48%{background-position:25px 0px,0px 0px;}
によって、25%から48%経過までは、ひとつめの図形は「右 25px、下 0px」、ふたつめの図形は「右 0px、下 0px」の位置となります。
その合間、経過時間23%～25%の2%に当たる時間内に、ひとつめの図形位置が0pxから25pxに滑らかに変化する、という指定ですね。
そうして何段階かで変化し、その移動によって「市松模様→縦縞→市松模様→横縞」と見た目が変化します。
数値の変化を大きくすると、素早く大きく動く事になるので、それもいいかも？
さて、ここからどうしたものかｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
