【CSS】フラフープの動きを再現できるか挑戦してみました【実用性：？？？】
どうも！LSSです！！
先日の記事、
を応用して使っていただいた記事の中で、
コメント欄にて「最初は女の子がフラフープをまわす・・・をやろうと思ったのですが、フラフープが上手くいきませんでした。」と書いておられるのを見かけました。
フラフープ…だと奥行きを考慮する必要があり、輪が人を囲んで、人の後ろに隠れた部分の輪を見えないようにしながら動かす…という表現が必要になってきます。
それをCSSの3D表現でやってみたらどうなるかな？と思い、挑戦してみました！
フラフープ
コード
<style>
@keyframes hula{
0%{transform:translateY(30px) rotateX(80deg) rotateZ(0deg);}
50%{transform:translateY(30px) rotateX(87deg) rotateZ(360deg);}
100%{transform:translateY(30px) rotateX(80deg) rotateZ(720deg);}
}
@keyframes hitohula{
0%,100%{top:0px;left:115px;}
50%{top:0px;left:110px;}
}
.waku{
position:relative;
width:275px;
height:275px;
transform-style:preserve-3d;
perspective:450px;
}
.hito{
position:absolute;
width:50px;
height:275px;
background:linear-gradient(90deg,#ff8888 0% 100%);
animation:hitohula linear 1.5s infinite;
}
.foop{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:radial-gradient(80px circle at 35% 50%,#88ff8800 85%,#88ff88ff 85% 99.9%,#88ff8800 100%);
animation:hula linear 3s infinite;
}
</style>
<div class="waku">
<div class="hito"> </div>
<div class="foop"> </div>
</div>
人…？
とりあえず、フラフープを回してる人…の代わりに、
.hito{
position:absolute;
width:50px;
height:275px;
background:linear-gradient(90deg,#ff8888 0% 100%);
animation:hitohula linear 1.5s infinite;
}
というコードを使用しています。
background:linear-gradient(90deg,#ff8888 0% 100%);
ピンクでベタ塗り、HTMLのほうでは
<div class="hito"> </div>
の部分に当たりますが、この要素内に画像ファイルを入れてCSSのbackgroundの行を削除してもOKです。
フープも同様に、
background:radial-gradient(80px circle at 35% 50%,#88ff8800 85%,#88ff88ff 85% 99.9%,#88ff8800 100%);
とradial-gradientで描いていますが、
<div class="foop"> </div>
の中に画像ファイルを入れてもOKです。
※CSSによって傾けているので、フープは楕円ではなく円の画像を用意する事になります。
と、作ってはみたものの…
実際に画像ファイルに置き換えたとして、位置調整がだいぶ大変かもです^^;
例えばフープの位置の高さは、
@keyframes hula{
0%{transform:translateY(30px) rotateX(80deg) rotateZ(0deg);}
50%{transform:translateY(30px) rotateX(87deg) rotateZ(360deg);}
100%{transform:translateY(30px) rotateX(80deg) rotateZ(720deg);}
}
この赤文字部分で行う事になります。（30pxとしていますが、これは中心より30px下にずらしている、という事になります。）
人の位置は、
@keyframes hitohula{
0%,100%{top:0px;left:115px;}
50%{top:0px;left:110px;}
}
この部分で上からの位置、左からの位置を指定。（アニメーションでわずかに左右に往復しています）
…うん、やはり実用性という点ではおおいに難がありますね^^;
単に「挑戦してみました」という内容でしたｗ
追記
background:radial-gradient(80px circle at 35% 50%,#88ff8800 85%,#88ff88ff 85% 99.9%,#88ff8800 100%);
↑コード中、上記赤文字部分、「100%」としていましたがiPhone対策のため「99.9%」に修正しました。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
