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

最新推荐文章于 2022-12-26 11:20:22 发布

runing_an_min

最新推荐文章于 2022-12-26 11:20:22 发布

阅读量268

点赞数 1

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/u014686399/article/details/115912120

版权

前端专栏收录该内容

21 篇文章 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>