はじめに

@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アニメーション楽しいので、今後もなにか作っていきたいです！