mame_hashbill@mame_hashbill
Improve article
Send edit request
Article information
RevisionsEdit RequestsShow all likersShow article in Markdown
Report article
Help us understand the problem. What is going on with this article?

[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●●

HTMLCSSscssアニメーション初心者

この記事について

CSSアニメーションを使って複数要素をばらばらにふわふわさせる方法を覚えたので記事を書こうと思ったけど、特にふわふわさせたいものもなかったのでタピオカを作って浮かせてみたぞい。

タピオカはそんなに好きじゃないけど丸くてかわいいよな・・・(´・ω・`)

See the Pen pozEpao by Mayu Mameuda (@mayu-mameuda) on CodePen.

カップとかストローとかもCSSで作ってみた。
せっかくなのでカップとかのところも解説するぞ。
(アニメーションのやり方だけ知りたい人は「ついにタピオカ」まで飛んでくれ〜〜〜)

全国のタピオカ好きのみんなに見てほしい・・・・

カップのCSS

カップを構成している要素は大きく全部で5つ。
・カップ
・カップの蓋
・カップの中身
・ストロー
・タピオカ

こんな感じにパーツを分けて作ったよ。

パーツごとに作ってただただposition:absolute;で乗せていったんだぜ！
そんな難しいことしてないけどせっかく作ったから一個ずつ見ていくぞ！

その前にabsoluteのmixinつくる

今回はめちゃくちゃposition:absolute;するので、
記述を少なくするために@mixinをぶち込もう！！！

@mixin absolute($top:null, $right:null, $bottom:null, $left:null){
  position: absolute;
  @if $top != null{
    top: $top;
  }
  @if $right != null{
    right: $right;
  }
  @if $bottom != null{
    bottom: $bottom;
  }
  @if $left != null{
    left: $left;
  }
}

このmixinを入れることで、例えば
@include absolute($top:0,$right:0);
と書くと、

position:absolute;
top:0;
right:0;

ってコンパイルされるようになるよ！便利だね！！

カップ作るぞい

まずはカップの真ん中の部分を作るぞ〜〜〜！！
なぜかというとこいつを基準に他のパーツを乗っけていくからだよ！

<div class="cup">
  <div class="cup__bottom"></div>
</div>

HTMLはこれだけ。
SCSSはこんな感じだ！

%cup,.cup{
  //カップの台形
  position: relative;
  width: 120px;
  height: 200px;
  background: #fff;
  &:before{
    content: ' ';
    border-right: 20px solid #fff;
    border-bottom: 200px solid transparent;
    border-radius: 6px 0 0 0 ;
    @include absolute($top:0,$left:-20px);
  }
  &:after{
    content: ' ';
    border-left: 20px solid #fff;
    border-bottom: 200px solid transparent;
    border-radius:0 6px 0 0 ;
    @include absolute($top:0,$right:-20px);
  }
  //カップの底
  &__bottom{
    width: 120px;
    height: 40px;
    border-radius: 60px / 20px;
    background:#fff;
    @include absolute($bottom:-20px,$left:0);
  }
}

カップの台形

白い台形部分は、.cupクラスに:beforeと:afterで
横のほっそい三角の部分をつけて台形にしている感じ。

「なんでborder-bottomとborder-leftでこんな風に三角になるの・・・？」って思う人、

私もよくわからない・・。すまん・・・・・・。

誰か親切な方、教えてください（切実）。

とりあえず私はこのサイトを参考に作ったぞ・・
html – 台形を逆にするにはどうすればいいですか？

border-bottomで三角形の高さが指定できて、
border-rightとborder-leftで三角の細さを指定できるってことはわかった。うん。

カップの底

カップの底は横に長い楕円だぞ。
楕円は、widthとheightに対してborder-radiusを半分にしてあげればできるぞい。

今回だとここの部分。

  width: 120px;
  height: 40px;
  border-radius: 60px / 20px;

これでバキッと楕円ができるよ。

で、こいつをカップの台形の下につければカップの真ん中部分は完成だぞ。

カップの中身だぞ


カップとおんなじような感じなので、つぎはカップの中身のHTMLとCSSを作ろう。

  <!-- カップの中身 -->
  <div class="cup__inner-wrap">
    <div class="cup__inner-top"></div><!-- カップの中身の上の楕円 -->
    <div class="cup__inner"></div><!-- カップの中身の台形 -->
    <div class="cup__inner-bottom"></div><!-- カップの中身の下の楕円 -->
  </div>

このHTMLを.cupの中に入れるぞ。

ちなみに.cup__inner-wrapでわざわざ囲ってるのは、
.cup__innerはカップの中身の基準となるパーツなのでposition:relative;だけど、
最終的にカップの中身はposition:absolute;させてカップの中に入れたいからだよ！

で、SCSSはこうだぞ！

%cup,.cup{
  //本当はここにさっき書いたSCSSが入るけど長くなるので省略
  //カップの中身を囲うラップ
  &__inner-wrap{
    @include absolute($bottom:0,$left:-40px);
  }
  //カップの中身の台形
  &__inner{
    width: 110px;
    height: 150px;
    background: #c49a6a;
    margin-left: 45px;
    position: relative;
    z-index:2;
    &:before{
      content: ' ';
      border-right: 15px solid #c49a6a;
      border-bottom: 150px solid transparent;
      border-radius: 3px 0 0 0 ;
      @include absolute($top:0,$left:-15px);
    }
    &:after{
      content: ' ';
      border-left: 15px solid #c49a6a;
      border-bottom: 150px solid transparent;
      border-radius:0 3px 0 0 ;
      @include absolute($top:0,$right:-15px);
    }
  }
  //カップの中身の上の楕円
  &__inner-top{
    width: 140px;
    height: 30px;
    background-color: #deb887;
    border-radius: 70px / 15px;
    z-index:3;
    @include absolute($top:-12px,$left:30px);
  }
  //カップの中身の下の楕円
  &__inner-bottom{
    width: 110px;
    height: 30px;
    border-radius: 55px / 15px;
    background-color: #c49a6a;
    z-index:1;
    @include absolute($top:134px,$left:45px);
  }
}

さっきと同じような感じで、.cup__innerで台形を作って、
上と下に楕円をposition:absolute;で重ねてるよ。

カップの蓋だぞ


カップの上の部分は、二つの楕円と細い四角で構成してるぞ。
例のごとくposition:absolute;して.cupに乗せてくぞ。

  <!-- カップの蓋 -->
  <div class="cup__top"></div>

HTMLはこれだけだぞ！
で、SCSSはこんな感じ。

  //カップの蓋
  &__top{
    width: 170px;
    height: 30px;
    border-radius: 85px / 15px;
    background:#f5f5f5;
    z-index:3;
    @include absolute($top:5px,$left:-24px);
    &:before{
     width:170px;
     height:13px;
     background:#f5f5f5;
     content:' ';
     @include absolute;
    }
    &:after{
     @extend %cup__top;
     background:#fff;
     z-index:1;
     top:-15px;
     left:0;
     content:' ';
    }
  }

灰色の楕円を先に作って、:beforeで細い灰色の四角の部分を、
:afterで上の白い楕円を乗っけてるぞ。

ストロー！


ストローは2本の棒みたいな四角とちっこい楕円で構成してるぞ。
もうだいたいやり方わかってると思うからHTMLとSCSSだけ下に載せとくぞい。

  <!-- ストロー -->
  <div class="straw"></div>
  <div class="straw--bottom"></div>

// ストロー
%straw,.straw{
  background:#ea5550;
  width:20px;
  height:70px;
  z-index:5;
  @include absolute($top:-70px,$left:50px);
  &:before{
    content:' ';
    width: 20px;
    height: 4px;
    background-color: #ea5550;
    border-radius: 10px / 2px;
    @include absolute($bottom:-2px);
  }
  &:after{
    @extend %straw:before;
    background-color: #a73836;
    top:-2px;
  }
  &--bottom{
    @extend %straw;
    height:30px;
    top:30px;
    left:50px;
    z-index:4;
  }
}

ついにタピオカ

タピオカは.tapiokaで黒丸を作ってから、ただ.cup__innerの部分に
一粒ずつ例のごとくposition:absolute;してるだけだな。

    <div class="cup__inner">
      <div class="tapioka tsubu-1"></div>
      <div class="tapioka tsubu-2"></div>
      <div class="tapioka tsubu-3"></div>
      <div class="tapioka tsubu-4"></div>
      <div class="tapioka tsubu-5"></div>
      <div class="tapioka tsubu-6"></div>
      <div class="tapioka tsubu-7"></div>
      <div class="tapioka tsubu-8"></div>
    </div>

.tapioka{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:20px;
  background:#000;
}
//それぞれの位置はtsubu-の方に書く

で、アニメーションは、一個の@keyframesでアニメーションを作ってから、
それを実行する時間をひと粒ずつ変えてるって感じだぞ！！

@keyframes tsubu {
  0% { transform:translateY( 0px); }
100% { transform:translateY( 3px); }
}

今回は、開始値が0px、終了値が縦軸で3pxとした。
つまり、開始位置からアニメーションを終えると3px分下がってる位置にタピオカがあるってこと。

【参考】
【CSS3】@keyframes と animation 関連のまとめ

この@keyframesを、.tsubu-1,2,3…のクラスに入れていくぞ。
animation:で以下のような記述を書いていこう！

今回は、この「1s」の部分をタピオカごとに変えていくぞ。
つまりこんな感じで0.1sくらいずつ時間をずらすんや！！！

.tsubu{
  &-1{
    bottom:4px;
    left:5px;
    animation: tsubu 1.2s ease-in-out infinite alternate;
  }
  &-2{
    bottom:-5px;
    left:28px;
    animation: tsubu 0.5s ease-in-out infinite alternate;
  }
  &-3{
    bottom:2px;
    left:55px;
    animation: tsubu 1s ease-in-out infinite alternate;
  }
  &-4{
    bottom:-2px;
    left:81px;
    animation: tsubu 0.6s ease-in-out infinite alternate;
  }
  &-5{
    bottom:34px;
    left:2px;
    animation: tsubu 0.8s ease-in-out infinite alternate;
  }
  &-6{
    bottom:25px;
    left:30px;
    animation: tsubu 0.7s ease-in-out infinite alternate;
  }
  &-7{
    bottom: 32px;
    left: 61px;
    animation: tsubu 0.9s ease-in-out infinite alternate;
  }
  &-8{
    bottom: 24px;
    left: 86px;
    animation: tsubu 1.1s ease-in-out infinite alternate;
  }
}

これで、一粒ずつちょっと違う動きをするふわふわタピオカが完成するぞい！

やった〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜✌︎('ω'✌︎ )

ただ、もろもろもっといいやり方がある気がするので、
もし親切な方がいたらもろもろ色々教えてくださ〜〜〜〜い！！！！！！

追記

隣に座ってる同僚がCSSでにゃんこつくって動かす記事を書いたよ！！！！！！
[CSS/HTML]CSSだけで、まなちゃん（ねこ）を作って動かす　〜作る編〜

めっちゃ癒されるし勉強になるのでこっちもよろしくな！！！！！！

Edit request
806
mame_hashbill
ハシビロコウ@mame_hashbillsorich
html/cssコーダーの雑記。 border-radiusのことが好き。丸いものは大体友達。 tableのことが嫌い。
sorich
株式会社SORICH
SORICHはWebシステム開発を主軸に、デザイン・Web制作・アプリ開発・IoTまで、クライアントの幅広いニーズに対応する技術者集団です。
https://www.sorich.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした