html+css3:实现热咖啡杯效果

傷城~ 2023-01-14 11:53 137阅读 0赞

<html>
        <head>
            <title>coffee</title>
        </head>
        <body>
            <div class="word">
                <h2>休</h2>
                <h2>息</h2>
                <h2>一</h2>
                <h2>下</h2>
            </div>
            <div class="coffee">
                <div class="gas"></div>
                <div class="gas"></div>
                <div class="gas"></div>
                <div class="cup-body">
                    <div class="water"></div>
                </div>
                <div class="cup-handle"></div>
                <div class="cup-pallet"></div>
                <div class="shadow"></div>
    
            </div>
        </body>
        <style>
            body{ 
                background-color: rgb(180, 147, 147);
            }
            .word{ 
                color: #fff;
                font-size: 20px;
                
            }
            .word h2{ 
                float: left;
            }
            @keyframes word-one { 
                from{ 
                    transform: translateX(0);
                }
                to{ 
                    transform: translateX(100%);
                    opacity: 0;
                }
            }      
            @keyframes word-two { 
                from{ 
                    transform: translateX(0);
                }
                to{ 
                    transform: translateX(-100%);
                    opacity: 0;
                }
            }
            h2:nth-of-type(odd){ 
                animation: word-one 5s ease-in-out 1s infinite;
            }
            h2:nth-of-type(even){ 
                animation: word-two 5s ease-in-out 1.3s infinite;
            }
            .coffee{ 
                width: 300px;
                height: 200px;
                /* background-color: rgb(163, 204, 165); */
                position:absolute;
                top: 50%;
                left: 50%;
                margin: auto;
                transform: translateX(-50%) translateY(-50%);
            }
            .cup-body{ 
                width: 300px;
                height: 200px;
                background-color: #fff;
                border-bottom-left-radius: 120px; 
                border-bottom-right-radius: 120px;
                position:absolute;
                overflow: hidden;
                z-index: 1;
            }
            .water{ 
                width: 168px;
                height: 349px;
                position:absolute;
                top: -10px;
                right: -16px;
                z-index: 2;
                background-color: rgb(78, 22, 22);
                transform: rotateZ(51deg)
            }
            .cup-handle{ 
                position:absolute;
                right: -54px;
                top: 5px;
                width: 93px;
                height: 93px;
                border-radius: 50%;
                background: rgb(180, 147, 147);
                border: #fff solid 10px;
            }
            .cup-pallet{ 
                width: 310px;
                height: 43px;
                background: #fff;
                position: absolute;
                top: 200px;
                border-bottom-left-radius: 50px;
                border-bottom-right-radius: 50px;
            }
            .shadow{ 
                width: 320px;
                height: 8px;
                position: absolute;
                top: 245px;
                background: #bfa8a8;
                border-radius: 52%;
            }
            .gas{ 
                width: 150px;
                height: 150px;
                left: 66px;
                background: rgb(255, 255, 255);
                border-radius: 50%;
                position: absolute;
                top: -65px;
                opacity: 0;
                z-index: 3;
                transform: scale(0.25);
            }
            .gas:nth-of-type(1){ 
                animation: move 5s ease-out infinite;
            }
            .gas:nth-of-type(2){ 
                animation: move 5s ease-out 2s infinite;
            }
            .gas:nth-of-type(3){ 
                animation: move1 5s ease-out 2.5s infinite;
            }
            @keyframes move{ 
                from{ 
                    opacity: 0.5;
                    transform:  scale(0.25) translateX(0) translateY(0);
                }
                to{ 
                    opacity: 0;
                    transform:  scale(0.5) translateX(80px) translateY(-270px);
                }
            }
            @keyframes move1{ 
                from{ 
                    opacity: 0.5;
                    transform:  scale(0.25) translateX(0) translateY(0);
                }
                to{ 
                    opacity: 0;
                    transform: scale(0.4) translateX(-90px) translateY(-280px);
                }
            }
        </style>
    </html>

![在这里插入图片描述][20210420162822583.gif]

[20210420162822583.gif]: /images/20221022/3c8281e6dd14436d87232f444410dc40.png