效果预览

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

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

可交互视频教程

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

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

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

源代码下载

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

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

代码解读

定义 dom,只有一个元素:

  1. <div class="panda"></div>

居中显示:

  1. body {
  2. margin: 0;
  3. height: 100vh;
  4. display: flex;
  5. align-items: center;
  6. justify-content: center;
  7. background-color: mediumturquoise;
  8. }

定义容器尺寸:

  1. .panda {
  2. width: 21em;
  3. height: 16em;
  4. background-color: white;
  5. }

画出头部轮廓:

  1. .panda {
  2. border: 0.5em solid #333;
  3. border-top-left-radius: 11em;
  4. border-top-right-radius: 11em;
  5. border-bottom-left-radius: 11em 6em;
  6. border-bottom-right-radius: 11em 6em;
  7. }

画出右眼轮廓:

  1. .panda {
  2. position: relative;
  3. }
  4. .panda::before {
  5. content: '';
  6. position: absolute;
  7. width: 7em;
  8. height: 4em;
  9. left: 2.9em;
  10. top: 5.5em;
  11. background-color: #333;
  12. border-radius: 50% 50% 45% 42%;
  13. transform: rotate(-45deg);
  14. }

类似地,画出左眼轮廓:

  1. .panda::after {
  2. content: '';
  3. position: absolute;
  4. width: 7em;
  5. height: 4em;
  6. left: 11.1em;
  7. top: 5.5em;
  8. background-color: #333;
  9. border-radius: 50% 50% 42% 45%;
  10. transform: rotate(45deg);
  11. }

画出两只耳朵:

  1. .panda::before {
  2. box-shadow: 1em -7.2em 0 -0.4em #333;
  3. }
  4. .panda::after {
  5. box-shadow: -1em -7.2em 0 -0.4em #333;
  6. }

画出两只眼睛:

  1. .panda::before {
  2. background-image:
  3. radial-gradient(circle at 5.1em 2em, white 0.3em, transparent 0.3em),
  4. radial-gradient(circle at 4.6em 2em, #333 0.7em, transparent 0.7em),
  5. radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);
  6. }
  7. .panda::after {
  8. background-image:
  9. radial-gradient(circle at 2.4em 1.5em, white 0.3em, transparent 0.3em),
  10. radial-gradient(circle at 2.4em 2em, #333 0.7em, transparent 0.7em),
  11. radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em);
  12. }

画出鼻子和嘴:

  1. .panda {
  2. background-image:
  3. radial-gradient(ellipse at 50% 60%, #333 1.2em, transparent 1.2em),
  4. radial-gradient(ellipse at 50% 80%, #555 0.6em, transparent 0.6em);
  5. }

增加一点立体效果:

  1. .panda {
  2. border-bottom-width: 1em;
  3. box-shadow: inset 1em -1em 0 #eee;
  4. }

让右眼动起来:

  1. .panda::before {
  2. animation: before-animate 1s ease-in-out infinite alternate;
  3. }
  4. @keyframes before-animate {
  5. to {
  6. background-image:
  7. radial-gradient(circle at 4.9em 1.8em, white 0.3em, transparent 0.3em),
  8. radial-gradient(circle at 4.4em 1.8em, #333 0.7em, transparent 0.7em),
  9. radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);
  10. }
  11. }

类似地,让左眼也动起来:

  1. .panda::after {
  2. animation: after-animate 1s ease-in-out infinite alternate -1s;
  3. }
  4. @keyframes after-animate {
  5. to {
  6. background-image:
  7. radial-gradient(circle at 2.6em 1.3em, white 0.3em, transparent 0.3em),
  8. radial-gradient(circle at 2.6em 1.8em, #333 0.7em, transparent 0.7em),
  9. radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em);
  10. }
  11. }

最后,让黑眼圈和耳朵也动起来:

  1. @keyframes before-animate {
  2. to {
  3. transform: rotate(-40deg);
  4. }
  5. }
  6. @keyframes after-animate {
  7. to {
  8. transform: rotate(40deg);
  9. }
  10. }

大功告成!

前端每日实战:35# 视频演示如何把 CSS 径向渐变用得出神入化,只用一个 DOM 元素就能画出国宝熊猫的更多相关文章

  1. 35.在CSS中 只用一个 DOM 元素就能画出国宝熊猫

    原文地址:https://segmentfault.com/a/1190000015052653 感想: 真神奇! HTML code: <div class="panda" ...

  2. 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...

  3. 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...

  4. 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可 ...

  5. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  6. 前端每日实战:141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...

  7. 前端每日实战:161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片(没有笑声的一天就是被荒废的一天)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WaaBNV 可交互视频 此视频是可 ...

  8. 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...

  9. 前端每日实战:142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...

随机推荐

  1. 《Vue前端开发手册》

    序言 为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主. 为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢 ...

  2. sysf接口的函数【转】

    本文转载自:http://blog.csdn.net/manshq163com/article/details/7848714 说道sysfs接口,就不得不提到函数宏 DEVICE_ATTR,原型是 ...

  3. mycat 配置简介

    最近在看 mycat ,官网: http://www.mycat.io/  上面就有 PDF 的教程下载.但是对于我这个初学者来讲,搭建环境的时候还是有点晕,下面从一个简单的例子来讲解相关配置.我用的 ...

  4. 架构-层-Model:Model

    ylbtech-架构-层-Model:Model 1.返回顶部 1. Model,意思是模特儿,模特儿是英文“model”的音译.模特一般来说要五官端正,身材良好,有气质,展示能力强,另外身高要具备一 ...

  5. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_07 缓冲流_6_BufferedReader_字符缓冲输入流

    读取到的是第一行数据 读取多行数据 使用循环

  6. 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第3节 接口_1_接口概述与生活举例

  7. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_1_泛型的概念

    ArrayList的源码,.在定义的时候用到了E这个E就是一个未知类型 ArrayList里面的add方法,参数也是E 包括我们之前常用的get方法 返回值也是E 类型什么时候可以确定呢?创建集合对象 ...

  8. Jmeter之ForEach控制器(配合正则表达式使用)

    在使用正则表达式提取响应信息时,存在部分信息有多个值,为了能使用所有的值,可以结合ForEach控制器使用. 一.界面显示 二.配置说明 1.名称:标识 2.注释:备注 3.输入变量前缀:是指需要提取 ...

  9. 接口自动化之提取响应结果(raw、json)

    做接口测试时,我们一般会取得响应结果的部分值,来与预期结果对比,做断言 目录 1.响应结果类型 2.json响应结果的提取 3.raw响应结果的提取 1.响应结果类型 通过fiddler的respon ...

  10. 最长k可重线段集问题【费用流】【优先队列Dijkstra费用流】

    题目链接 与最长K可重区间问题一样的解法,但是这道题却有很多需要注意的地方,譬如就是精度问题,一开始没考虑到sprt()里面的乘会爆了精度,然后交上去竟然是TLE,然后找的原因方向也没对,最后TLE了 ...