はじめに
@mame_hashbill さんの記事の「[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●●」を見て、めっちゃタピオカだー！すげー！ってなりました
そこで、自分もCSSアニメーションでなにか作ってみたいと思って、コーラを作ってみました！
炭酸をできるだけリアルに表現するために頑張りました！
コーラ
See the Pen コーラ by みっちー (@michimichix521) on CodePen.
こちらがコーラとそのプログラムになります。
コードをコピペすると同じように表示できると思います！
色とか変えることで、他の炭酸飲料水にもなると思うので、興味がある方はぜひやってみてください！
こちらにもコードを記載しておきます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>コーラ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="cup">
<div class="drink">
<div class="bubbles">
<div class="bubble bubble-2"></div>
<div class="bubble bubble-5"></div>
<div class="bubble bubble-1"></div>
<div class="bubble bubble-3"></div>
<div class="bubble bubble-4"></div>
</div>
<div class="bubbles">
<div class="bubble bubble-4"></div>
<div class="bubble bubble-1"></div>
<div class="bubble bubble-5"></div>
<div class="bubble bubble-2"></div>
<div class="bubble bubble-3"></div>
</div>
<div class="bubbles">
<div class="bubble bubble-2"></div>
<div class="bubble bubble-4"></div>
<div class="bubble bubble-3"></div>
<div class="bubble bubble-5"></div>
<div class="bubble bubble-1"></div>
</div>
<div class="bubbles">
<div class="bubble bubble-3"></div>
<div class="bubble bubble-5"></div>
<div class="bubble bubble-2"></div>
<div class="bubble bubble-4"></div>
<div class="bubble bubble-1"></div>
</div>
</div>
<div class="straw"></div>
</div>
</body>
</html>
styles.css
body{
background-color:skyblue;
}
.cup{
margin:60px auto 0;
width:150px;
height:250px;
box-sizing: border-box;
border: 10px solid whitesmoke;
border-radius:5px;
border-top:none;
}
.drink{
margin:0 auto;
width:130px;
height:220px;
background-color:#521810;
border-radius:3px;
position:relative;
top:20px;
}
.bubbles{
width:130px;
height:55px;
display:flex;
align-items:flex-end;
}
.bubble{
margin:0 auto;
width:7px;
height:7px;
background-color:snow;
opacity:0.05;
border-radius:50%;
animation-name:move;
animation-timing-function:ease-out;
animation-iteration-count:infinite;
}
.bubble-1{animation-duration:0.8s;}
.bubble-2{animation-duration:1.0s;}
.bubble-3{animation-duration:1.2s;}
.bubble-4{animation-duration:1.4s;}
.bubble-5{animation-duration:1.6s;}
@keyframes move{
from{transform:none;}
to{transform:translateY(-40px);}
}
.straw{
width:20px;
height:300px;
background-color:tomato;
border-radius:3px;
opacity:0.8;
position:relative;
top:-275px;
left:75px;
transform:rotate(20deg);
}
おわりに
ここまで読んでいただき、ありがとうございました。
CSSアニメーション楽しいので、今後もなにか作っていきたいです！