CSS回転のみを用いたメッシュライジングアニメーション🧘‍♀️

私は、Codepenの上で奇妙に満足しているCSSアニメーションを作成しました.Redditに少しウイルスをかけたので、ここでどうしたかを共有することにしました.

ステップ1
誰もこれまで読んで、右にジャンプイントロをスキップしてみましょう.最初のステップは、CSSを使用して陰陽を作成することです.
絵は千の言葉の価値があるので、下の図を見てください.

私たちはdivであり、2つの小さな円は::beforeの::afterとdivの擬似要素です.つの要素は、円であるために50 %のborder-radiusを持ちます.
主なDIVはbackground-imageに設定されたlinear-gradientを持ちます.これにより、divはハーフホワイトハーフブラックであるべきです.
他の2つの円のために、彼らは大きい(to left, #fff, #fff 50%, #000 50%, #000)を持ちます、そして、彼らのborder-widthは彼らのバックグラウンド色(例えば、黒い境界線による白い円)の反対です.このように、あまり多くのHTML要素を必要としません、そして、それはセンター(それらの上の1つ)にそれらを置くのがより簡単です.

With this, it could be a good exercise to try to do the rest of the animation on your own. You can come back here to compare the implementations ;)

ステップ2
次に、コンテナ242479142(半分黒半分の白)と別の陰陽(2つの他の上に配置する必要があります)が必要です.見てみる


ステップ3
この時点で我々はほとんど完了しています、我々がしなければならないすべては、コンテナborder-colorの反対方向に陰陰をアニメーション化することです.このため、div CSSプロパティを使用し、divに設定できます.
CSSアニメーションは次のようになります.

@keyframes roll {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(-360deg);
  }
}

最後にコードを示します.
これがこのポストです.閉じるこの動画はお気に入りから削除されています.あなたがしたならば、あなたの友人と同僚とそれを共有して、私がウェブ開発とコンピュータサイエンスについてさえずる所で、Twitterで私について来てください.
良い一日を!

次に何を読むか.

I made a working Gameboy CSS art: try it out 🕹

Mustapha Aouas ・ Nov 25 ・ 5 min read

#css #javascript #algorithms #tutorial