资讯专栏INFORMATION COLUMN

前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)

cpupro / 2966人阅读

摘要:可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。第部分第部分源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器中包含一个表示酒桶的元素和表示啤酒杯的元素。

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/rZeOQp

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

第 1 部分:
https://scrimba.com/p/pEgDAM/c86mdUZ

第 2 部分:
https://scrimba.com/p/pEgDAM/cmVNbTW

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

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);
    }
}

大功告成!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/55080.html

相关文章

  • 前端每日实战119# 视频演示何用 CSS 创作扎啤动画内含2视频

    摘要:可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。第部分第部分源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器中包含一个表示酒桶的元素和表示啤酒杯的元素。 showImg(https://segmentfault.com/img/bVbfXIy?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 ht...

    Cristic 评论0 收藏0
  • 前端每日实战119# 视频演示何用 CSS 创作扎啤动画内含2视频

    摘要:可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。第部分第部分源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器中包含一个表示酒桶的元素和表示啤酒杯的元素。 showImg(https://segmentfault.com/img/bVbfXIy?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 ht...

    learn_shifeng 评论0 收藏0
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读, 过往项目 2018 年 9 月份项目汇总(共 26 个项目) 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(...

    twohappy 评论0 收藏0
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读, 过往项目 2018 年 9 月份项目汇总(共 26 个项目) 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(...

    muddyway 评论0 收藏0
  • 前端每日实战 2018 年 7 月份项目汇总(共 29 项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用 过往项目 2018 年 6 月份项目汇总(共 27 个项目) 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(...

    ghnor 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<