如何用純CSS實現接紮啤的特效（附源碼）

本篇文章給大家帶來的內容是關於如何用純CSS實現接紮啤的特效（附源碼） ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

原始碼下載

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器中包含一個表示酒桶的 .keg 元素和表示啤酒杯的 .glass 元素。酒桶有 2 個子項目，.handle 表示把手，.pipe 表示出水管，酒杯有 1 個表示啤酒的子項目 .beer：

<div class="container">    <div class="keg">        <span class="handle"></span>        <span class="pipe"></span>    </div>    <div class="glass">        <span class="beer"></span>    </div></div>

置中顯示：

body {    margin: 0;    height: 100vh;    display: flex;    justify-content: center;    background: linear-gradient(        lightslategray 300px,        #333 300px    );}

定義容器尺寸和虛擬元素的共有屬性：

.container {    width: 700px;    height: 300px;    position: relative;}.container *::before,.container *::after {    content: '';    position: absolute;}

畫出酒桶：

.keg {    position: absolute;    width: 90px;    height: 200px;    background: linear-gradient(        to right,        #777 70px,        #555 70px    );    bottom: 0;    left: 310px;}

畫出出水管和它的支架：

.keg .pipe {    position: absolute;    width: 10px;    height: 40px;    background-color: #ccc;    top: 33px;    left: 10px;}.keg .pipe::before {    width: 40px;    height: 20px;    background:         radial-gradient(            circle at 10px 10px,            #eee 7px,            #ccc 7px, #ccc 10px,            transparent 10px        ),        linear-gradient(            #ccc 50%,            #999 50%        );    border-radius: 10px;    top: -2px;    left: -5px;}

畫出把手：

.keg .handle {    position: absolute;    border-style: solid;    border-width: 50px 10px 0 10px;    border-color: black transparent transparent transparent;    top: -10px;    left: 5px;}.keg .handle::before {    width: 20px;    height: 10px;    background-color: #ccc;    top: -60px;    left: -10px;    border-radius: 5px 5px 0 0;}.keg .handle::after {    width: 10px;    height: 20px;    background-color: #ccc;    top: -20px;    left: -5px;}

畫出酒杯：

.glass {    position: absolute;    width: 70px;    height: 100px;    color: rgba(255, 255, 255, 0.3);    background-color: currentColor;    bottom: 0;    left: 300px;    border-radius: 5px;}.glass::before {    width: 50px;    height: 40px;    border: 10px solid;    top: 20px;    right: -20px;    border-radius: 0 40% 40% 0;    clip-path: inset(0 0 0 72%);}

畫出杯中的啤酒和泡沫：

.beer {    position: absolute;    width: 60px;    height: 80px;    background-color: rgba(255, 206, 84, 0.8);    bottom: 15px;    left: 5px;    border-radius: 0 0 5px 5px;    border-top: solid rgba(255, 206, 84, 0.8);}.beer::before {    width: inherit;    height: 15px;    background-color: #eee;    top: -15px;    border-radius: 5px 5px 0 0;}

接下來製作動畫。

增加酒杯把手被壓下的動畫效果：

.keg .handle {    transform-origin: center 50px;    animation: handle 5s infinite;}@keyframes handle {    10%, 60% {        transform: rotate(0deg);    }    20%, 50% {        transform: rotate(-90deg);    }}

增加啤酒被斟滿的動畫效果：

.beer {    animation: fillup 5s infinite;}@keyframes fillup {    0%, 20% {        height: 0px;        border-width: 0px;    }    40% {        height: 40px;    }    80%, 100% {        height: 80px;        border-width: 5px;    }}

增加啤酒泡沫泛起的動畫效果：

.beer::before {    animation:         wave 0.5s infinite alternate,        fillup-foam 5s linear infinite;}@keyframes fillup-foam {    0%, 20% {        top: 0;        height: 0;    }    60%, 100% {        top: -15px;        height: 15px;    }}@keyframes wave {    from {        transform: skewY(-3deg);    }    to {        transform: skewY(3deg);    }}

增加啤酒從出水口流出的效果：

.keg .pipe::after {    width: 10px;    background-color: rgba(255, 206, 84, 0.5);    animation: flow 5s infinite;}@keyframes flow {    0%, 15% {        top: 40px;        height: 0;    }    20% {        height: 115px;    }    40% {        height: 75px;    }    55% {        top: 40px;        height: 50px;    }    60%, 100% {        top: 80px;        height: 0;    }}

最後，增加酒杯滑動的效果：

.glass {    animation: slide 5s ease infinite;}@keyframes slide {    0% {        left: 0;        filter: opacity(0);    }    20%, 80% {        left: 300px;        filter: opacity(1);    }    100% {        left: 600px;        filter: opacity(0);    }}

大功告成！