前端每日实战: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 可交互视频 此视频是可 ...
随机推荐
- SQL报错:ORA-00911:无效的字符错误
转载自:https://blog.csdn.net/huangyanlong/article/details/38096469 *)ORA-00911:无效的字符错误——由编译环境下一个小错误引起.S ...
- 箭头函数(Arrow Functions)
ES5语法: var getPrice = function() { return 4.55; }; console.log(getPrice()); ES6 中,箭头函数就是函数的一种简写形式,使用 ...
- Matlab 中 函数circshift()的用法
a = [ ; ; ]; b = [- - -; - - -;- - -]; c = [ ; ; ]; Hist(:,:,) = a; Hist(:,:,) = b; Hist(:,:,) = c; ...
- P4999烦(gui)人(chu)的数学作业
P4399P4999 这是一道有着三倍经验的宝藏题目 我们可以求出来1到n中,1~9分别出现了几次,设f[i]为数字i出现的次数,则\(ans=\sum{f[i]\cdot i}\) 然后就是数位dp ...
- 【转】mackbook wifi卡死未响应的问题
原文:http://tieba.baidu.com/p/6140144143?traceid= 1. wifi未响应了,紧急处理法:打开活动监视器,搜索airportd,结束掉进程 2. 彻底解决办法 ...
- ubuntu 安装java1.8
1.进入官网下载页面http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.选择需要的版本,进入下载页面 下载 jdk ...
- EntityFrameworkCore.MySql
1.点击“工具”->“NuGet包管理器”->“程序包管理器控制台” 分别安装以下几个包 Mysql 版本: Install-Package MySql.Data.EntityFramew ...
- Maven中Jar包冲突,不让某个Jar包打入到工程中
查看工程目前冲突的Jar包,这里以fastjson.jar为例: 打开工程的pom.xml,进入到Dependency Hierarchy页面搜寻目标Jar. 从这里我们可以看到目前工程中有2处导入 ...
- 从Android手机中取出已安装的app包,导出apk
从Android手机中取出已安装的app包,导出apk TAG:Android,提取,apk,adb,pm,root,导出apk 假设有这样一个场景,A君看到你手机上一个实用APP,想要安装到自己手机 ...
- springboot An incompatible version [1.1.32] of the APR based Apache Tomcat Native library is installed, while Tomcat requires version [1.2.14]
1.错误 An incompatible version [1.1.32] of the APR based Apache Tomcat Native library is installed, wh ...