【CSS애니메이션】HTML과 CSS만으로 콜라(탄산쥬와쥬와~)를 만들어 보았다

13983 단어 애니메이션HTMLCSS초보자CSS3

소개



@mame_hashbill 씨의 기사의 「[CSS애니메이션] ●●● CSS로 타피오카를 만들고 푹신푹신한 ●●●」를 보고, 굉장히 타피오카다-! 미안해! 되었습니다

거기서, 자신도 CSS 애니메이션으로 무엇인가 만들고 싶다고 생각하고, 콜라를 만들어 보았습니다!
탄산을 가능한 한 리얼하게 표현하기 위해 노력했습니다!

콜라



See the Pen 콜라 by 미치치 ( 🍑파고 )
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 애니메이션 즐겁기 때문에 앞으로도 뭔가 만들어 가고 싶습니다!


[CSS애니메이션]삼(卍^o^)卍←이 녀석의 이것→卍을 돌리고 싶다
【CSS 애니메이션】HTML과 CSS만으로 만들어 보았던 「선풍기」

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage