【CSSアニメーション】HTMLとCSSだけでコーラ（炭酸ジュワジュワ～）を作ってみた

13843 ワード
アニメーション HTML CSS 初心者 CSS3 HTML テキストリンク

はじめに

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