当前位置: 首页 > news >正文

前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽

图片描述

效果预览

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

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

可交互视频

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

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

https://scrimba.com/p/pEgDAM/c43ekUL

源代码下载

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

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

代码解读

定义 dom,容器中包含 2 个元素,分别代表怪兽的身体和眼睛:

<div class="monster">
    <span class="body"></span>
    <span class="eyes"></span>
</div>

设置背景色:

body {
    margin: 0;
    height: 100vh;
    background-color: black;
}

设置前景色:

.monster {
    width: 100vw;
    height: 50vh;
    background-color: lightcyan;
}

画出怪兽的身体:

.monster {
    position: relative;
}

.body {
    position: absolute;
    width: 32vmin;
    height: 32vmin;
    background-color: teal;
    border-radius: 43% 40% 43% 40%;
    bottom: calc(-1 * 32vmin / 2 - 4vmin);
}

定义怪兽眼睛所在的容器:

.eyes {
    width: 24vmin;
    height: 5vmin;
    position: absolute;
    bottom: 2vmin;
    left: calc(32vmin - 24vmin - 2vmin);
}

用伪元素画出怪兽的眼睛:

.eyes::before,
.eyes::after {
    content: '';
    position: absolute;
    width: 5vmin;
    height: 5vmin;
    border: 1.25vmin solid white;
    box-sizing: border-box;
    border-radius: 50%;
}

.eyes::before {
    left: 4vmin;
}

.eyes::after {
    right: 4vmin;
}

为怪兽定义轻轻跳起的动画,结合后面的动画效果,让它具有果冻的弹性:

.body {
    animation:
        bounce 1s infinite alternate;
}

@keyframes bounce {
    to {
        bottom: calc(-1 * 32vmin / 2 - 2vmin);
    }
}

让怪兽的身体转动起来:

@keyframes wave {
    to {
        transform: rotate(360deg);
    }
}

让怪兽徘徊行走:

.monster {
    overflow: hidden;
}

.body {
    left: -2vmin;
    animation:
        wander 5s linear infinite alternate,
        wave 3s linear infinite,
        bounce 1s infinite alternate;
}

.eyes {
    animation: wander 5s linear infinite alternate;
}

@keyframes wander {
    to {
        left: calc(100% - 32vmin + 2vmin);
    }
}

最后,让怪兽的眼睛眨一眨:

.eyes::before,
.eyes::after {
    animation: blink 3s infinite linear;
}

@keyframes blink {
    4%, 10%, 34%, 40% {
        transform: scaleY(1);
    }

    7%, 37% {
        transform: scaleY(0);
    }
}

大功告成!

相关文章:

  • 关于DAMAGE: after Normal block的问题 【from http://blog.sina.com.cn/s/blog_a4864fde01014962.html】...
  • ispoweroftwo 判断2的次幂【转】
  • 用 puppeteer 获取 jd 商品评论
  • LightOJ 1033 区间dp
  • 多线程停止的方法
  • Java 学习(18)--列表(List)/ 集合 (Set)/ 泛型 / Map
  • Koala – 开源的前端预处理器语言图形编译工具
  • 头晕的奶牛 C组模拟赛
  • 文件头修改工具
  • 网络编程知识整理
  • 在IDEA中,MAVEN项目依赖报错问题(dependencies中总是有红色波浪线)
  • React 16 Jest快照测试
  • 常用的商业级和免费开源Web漏洞扫描工具
  • 从零开始学习部署
  • python:unittest之跳过测试和预期失败的用例
  • SegmentFault for Android 3.0 发布
  • HomeBrew常规使用教程
  • Laravel5.4 Queues队列学习
  • Laravel深入学习6 - 应用体系结构:解耦事件处理器
  • leetcode386. Lexicographical Numbers
  • 记录一下第一次使用npm
  • 今年的LC3大会没了?
  • 跨域
  • 漂亮刷新控件-iOS
  • 前端临床手札——文件上传
  • 入手阿里云新服务器的部署NODE
  • 数据可视化之 Sankey 桑基图的实现
  • # 再次尝试 连接失败_无线WiFi无法连接到网络怎么办【解决方法】
  • #QT(串口助手-界面)
  • (1)Android开发优化---------UI优化
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (4)Elastix图像配准:3D图像
  • (a /b)*c的值
  • (pt可视化)利用torch的make_grid进行张量可视化
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (Redis使用系列) Springboot 在redis中使用BloomFilter布隆过滤器机制 六
  • (附源码)springboot 基于HTML5的个人网页的网站设计与实现 毕业设计 031623
  • (六)vue-router+UI组件库
  • (四) 虚拟摄像头vivi体验
  • (转)ABI是什么
  • (转载)Linux网络编程入门
  • .mysql secret在哪_MySQL如何使用索引
  • .NET C# 使用 SetWindowsHookEx 监听鼠标或键盘消息以及此方法的坑
  • .NET Core 将实体类转换为 SQL(ORM 映射)
  • .Net Core与存储过程(一)
  • .secret勒索病毒数据恢复|金蝶、用友、管家婆、OA、速达、ERP等软件数据库恢复
  • @serverendpoint注解_SpringBoot 使用WebSocket打造在线聊天室(基于注解)
  • [ C++ ] STL_stack(栈)queue(队列)使用及其重要接口模拟实现
  • [16/N]论得趣
  • [C++] 默认构造函数、参数化构造函数、拷贝构造函数、移动构造函数及其使用案例
  • [C++进阶篇]STL中vector的使用
  • [dts]Device Tree机制
  • [GN] 后端接口已经写好 初次布局前端需要的操作(例)
  • [IDF]摩斯密码