はじめに
CSSで遊ぶのが好きな女が、
回転しながら変形する癒しのボールをCSSだけで作成しました。
コードはこちら
See the Pen Untitled by 森由唯 (@ubdhtixg-the-scripter) on CodePen.
回転する仕組み
マウスホバー時に
-
transform: translate()
で水平方向に移動する -
transform: rotate()
で180度回転する
transform: translate(200%, 0%) rotate(180deg);
これだけです
@keyframes
でアニメーションさせても良いと思います。
グラデーションだけでなく、画像に置き換えてもかわいいかも。