前端每日实战:35# 视频演示如何把 CSS 径向渐变用得出神入化,只用一个 DOM 元素就能画出国宝熊猫
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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,只有一个元素:
<div class="panda"></div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: mediumturquoise;
}
定义容器尺寸:
.panda {
width: 21em;
height: 16em;
background-color: white;
}
画出头部轮廓:
.panda {
border: 0.5em solid #333;
border-top-left-radius: 11em;
border-top-right-radius: 11em;
border-bottom-left-radius: 11em 6em;
border-bottom-right-radius: 11em 6em;
}
画出右眼轮廓:
.panda {
position: relative;
}
.panda::before {
content: '';
position: absolute;
width: 7em;
height: 4em;
left: 2.9em;
top: 5.5em;
background-color: #333;
border-radius: 50% 50% 45% 42%;
transform: rotate(-45deg);
}
类似地,画出左眼轮廓:
.panda::after {
content: '';
position: absolute;
width: 7em;
height: 4em;
left: 11.1em;
top: 5.5em;
background-color: #333;
border-radius: 50% 50% 42% 45%;
transform: rotate(45deg);
}
画出两只耳朵:
.panda::before {
box-shadow: 1em -7.2em 0 -0.4em #333;
}
.panda::after {
box-shadow: -1em -7.2em 0 -0.4em #333;
}
画出两只眼睛:
.panda::before {
background-image:
radial-gradient(circle at 5.1em 2em, white 0.3em, transparent 0.3em),
radial-gradient(circle at 4.6em 2em, #333 0.7em, transparent 0.7em),
radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);
}
.panda::after {
background-image:
radial-gradient(circle at 2.4em 1.5em, white 0.3em, transparent 0.3em),
radial-gradient(circle at 2.4em 2em, #333 0.7em, transparent 0.7em),
radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em);
}
画出鼻子和嘴:
.panda {
background-image:
radial-gradient(ellipse at 50% 60%, #333 1.2em, transparent 1.2em),
radial-gradient(ellipse at 50% 80%, #555 0.6em, transparent 0.6em);
}
增加一点立体效果:
.panda {
border-bottom-width: 1em;
box-shadow: inset 1em -1em 0 #eee;
}
让右眼动起来:
.panda::before {
animation: before-animate 1s ease-in-out infinite alternate;
}
@keyframes before-animate {
to {
background-image:
radial-gradient(circle at 4.9em 1.8em, white 0.3em, transparent 0.3em),
radial-gradient(circle at 4.4em 1.8em, #333 0.7em, transparent 0.7em),
radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);
}
}
类似地,让左眼也动起来:
.panda::after {
animation: after-animate 1s ease-in-out infinite alternate -1s;
}
@keyframes after-animate {
to {
background-image:
radial-gradient(circle at 2.6em 1.3em, white 0.3em, transparent 0.3em),
radial-gradient(circle at 2.6em 1.8em, #333 0.7em, transparent 0.7em),
radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em);
}
}
最后,让黑眼圈和耳朵也动起来:
@keyframes before-animate {
to {
transform: rotate(-40deg);
}
}
@keyframes after-animate {
to {
transform: rotate(40deg);
}
}
大功告成!
前端每日实战:35# 视频演示如何把 CSS 径向渐变用得出神入化,只用一个 DOM 元素就能画出国宝熊猫的更多相关文章
- 35.在CSS中 只用一个 DOM 元素就能画出国宝熊猫
原文地址:https://segmentfault.com/a/1190000015052653 感想: 真神奇! HTML code: <div class="panda" ...
- 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...
- 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战:141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...
- 前端每日实战:161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片(没有笑声的一天就是被荒废的一天)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WaaBNV 可交互视频 此视频是可 ...
- 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...
- 前端每日实战:142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...
随机推荐
- 《Vue前端开发手册》
序言 为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主. 为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢 ...
- sysf接口的函数【转】
本文转载自:http://blog.csdn.net/manshq163com/article/details/7848714 说道sysfs接口,就不得不提到函数宏 DEVICE_ATTR,原型是 ...
- mycat 配置简介
最近在看 mycat ,官网: http://www.mycat.io/ 上面就有 PDF 的教程下载.但是对于我这个初学者来讲,搭建环境的时候还是有点晕,下面从一个简单的例子来讲解相关配置.我用的 ...
- 架构-层-Model:Model
ylbtech-架构-层-Model:Model 1.返回顶部 1. Model,意思是模特儿,模特儿是英文“model”的音译.模特一般来说要五官端正,身材良好,有气质,展示能力强,另外身高要具备一 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_07 缓冲流_6_BufferedReader_字符缓冲输入流
读取到的是第一行数据 读取多行数据 使用循环
- 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第3节 接口_1_接口概述与生活举例
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_1_泛型的概念
ArrayList的源码,.在定义的时候用到了E这个E就是一个未知类型 ArrayList里面的add方法,参数也是E 包括我们之前常用的get方法 返回值也是E 类型什么时候可以确定呢?创建集合对象 ...
- Jmeter之ForEach控制器(配合正则表达式使用)
在使用正则表达式提取响应信息时,存在部分信息有多个值,为了能使用所有的值,可以结合ForEach控制器使用. 一.界面显示 二.配置说明 1.名称:标识 2.注释:备注 3.输入变量前缀:是指需要提取 ...
- 接口自动化之提取响应结果(raw、json)
做接口测试时,我们一般会取得响应结果的部分值,来与预期结果对比,做断言 目录 1.响应结果类型 2.json响应结果的提取 3.raw响应结果的提取 1.响应结果类型 通过fiddler的respon ...
- 最长k可重线段集问题【费用流】【优先队列Dijkstra费用流】
题目链接 与最长K可重区间问题一样的解法,但是这道题却有很多需要注意的地方,譬如就是精度问题,一开始没考虑到sprt()里面的乘会爆了精度,然后交上去竟然是TLE,然后找的原因方向也没对,最后TLE了 ...