如何用纯 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);
}
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015484852
如何用纯 CSS 创作一只徘徊的果冻怪兽的更多相关文章
- 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可 ...
- 70.纯 CSS 创作一只徘徊的果冻怪兽
原文地址:https://segmentfault.com/a/1190000015484852 感想:monster中边框角.上下动画.旋转动画.左右动画,眼睛中transform:scaleY(n ...
- 前端每日实战:103# 视频演示如何用纯 CSS 创作一只监视眼
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBzLdy 可交互视频 此视频是可 ...
- 前端每日实战:111# 视频演示如何用纯 CSS 创作一只艺术的鸭子
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/aaoveW 可交互视频 此视频是可 ...
- 前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VBGWqX 可交互视频 此视频是可 ...
- 前端每日实战:124# 视频演示如何用纯 CSS 创作一只纸鹤
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xagoYb 可交互视频 此视频是可 ...
- 前端每日实战:58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrRmWy 可交互视频 此视频是可 ...
- 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...
- 前端每日实战:132# 视频演示如何用纯 CSS 创作一只思考的手
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WgdVyx/ 可交互视频 此视频是 ...
随机推荐
- rimraf删除gulp的模块插件
1.安装:npm install -g rimraf(全局安装),如果安装了cnpm,也可使用cnpm install -g rimraf 命令 2.使用:先定位目标文件夹的父级目录,然后命令行输入r ...
- 【黑金原创教程】【TimeQuest】【第七章】供源时钟与其他
声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...
- 常用MySQL函数
MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: 系统信息函数: 加密函数: 格式化函数: 一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ...
- OSharp DbContent初始化分析
DBContent初始化 —— 关联Entity查找 一. 关联到具体的Entity 二. 通过EntityTypeConfiguration 关联到DbContent 三. ...
- Python 有什么奇技淫巧?
知乎上有一个问题:Python 有什么奇技淫巧?其中有各种不按套路出牌的招数,也不乏一些惊为天人的"奇技淫巧",会让你大呼:居然还有这种操作??? 本文就是对日常使用过的或者觉得很 ...
- Mybatis框架学习总结-调用存储过程
设计需求 查询数据库,查询得到男性或女性的数量,如果传入的参数是0查询女性,否则查询男性. 准备数据库表和存储过程 1.准备person表: CREATE TABLE person( id INT P ...
- 需求用例分析之五:业务用例之Rational系
版权声明:作者:张克强.未经作者允许不得转载. https://blog.csdn.net/zhangmike/article/details/28134897 作者:张克强 作者微博:张克强- ...
- Java集合—集合框架
前言 在Java语言中,Java语言的设计者对常用的数据结构和算法做了一些规范(接口)和实现(具体实现接口的类).所有抽象出来的数据结构和操作(算法)统称为Java集合框架(JavaCollectio ...
- 17.出现fatal signal(SIGSEGV),code 1,fault addr 0x0 in tid 29931的问题
原因是: 在onCreate方法里面调一些东西的时候,有时候系统相关的东西还没有初始化完,你的代码就已经执行了,会出现一些问题 解决方法: 增加延时1s /一.第一步初始化,此处用的是demo的ap ...
- SSH secure shell 原理与运用
转: http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html 作者: 阮一峰 日期: 2011年12月21日 SSH是每一台Linux ...