本篇文章给大家带来的内容是关于如何用纯css实现接扎啤的特效（附源码） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom，容器中包含一个表示酒桶的 .keg 元素和表示啤酒杯的 .glass 元素。酒桶有 2 个子元素，.handle 表示把手，.pipe 表示出水管，酒杯有 1 个表示啤酒的子元素 .beer：
居中显示：
立即学习“前端免费学习笔记（深入）”；
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); }}
大功告成！
相关推荐：
如何使用纯CSS实现一个沙漏的动画效果
如何使用CSS和D3实现一组彩灯（附代码）
以上就是如何用纯CSS实现接扎啤的特效（附源码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611280.html
微信扫一扫 
支付宝扫一扫 
