前端每日实战:36# 视频演示如何利用 CSS 动画原理,在页面上表现日蚀现象
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/OELvrK
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cgnzMAz
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,一个名为 sky 的容器,其中包含一个 sun 元素和一个 moon 元素:
<div class="sky">
<div class="sun"></div>
<div class="moon"></div>
</div>
画出天空:
body {
margin: 0;
}
.sky {
width: 100vw;
height: 100vh;
background-color: skyblue;
}
画出太阳:
.sky {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.sun {
position: absolute;
width: 50vmin;
height: 50vmin;
border-radius: 50%;
background-color: gold;
}
画出月亮:
.moon {
position: absolute;
width: 50vmin;
height: 50vmin;
border-radius: 50%;
background-color: slategray;
transform: translateX(-55vmin);
}
定义天空的变化,当日蚀来临时天空会变黑:
@keyframes animate-sky {
50% {
background-color: black;
}
}
定义太阳的变化,当日蚀来临时太阳虽会被遮挡,但光晕仍会透出:
@keyframes animate-sun {
50% {
box-shadow: 0 0 5em 1em white;
}
}
定义月亮的动画,当它运动到和太阳重叠的位置时,因为没有光,就看不到它的颜色了:
@keyframes animate-moon {
from {
transform: translateX(-100vmin);
}
50% {
background-color: black;
}
to {
transform: translateX(100vmin);
}
}
把动画应用到元素上:
.sky,
.sun,
.moon {
animation: 10s linear infinite;
}
.sky {
animation-name: animate-sky;
}
.sun {
animation-name: animate-sun;
}
.moon {
animation-name: animate-moon;
}
最后,隐藏滚动条:
.sky {
overflow: hidden;
}
大功告成!
前端每日实战:36# 视频演示如何利用 CSS 动画原理,在页面上表现日蚀现象的更多相关文章
- 如何利用 CSS 动画原理,在页面上表现日蚀现象
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教 ...
- 36纯 CSS 动画原理,在页面上表现日蚀现象
原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...
- 前端每日实战:31# 视频演示如何利用 CSS 的动画原理,创作一个乒乓球对打动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rvgLzK 可交互视频教程 此视频 ...
- 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可 ...
- 前端每日实战:37# 视频演示如何把握好 transition 和 animation 的时序,创作描边按钮特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mKdzZM 可交互视频教程 此视频 ...
- 前端每日实战:91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 此视频是可 ...
- 前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VBGWqX 可交互视频 此视频是可 ...
- 前端每日实战:152# 视频演示如何用纯 CSS 创作一个圆点错觉效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gBwzKR 可交互视频 此视频是可 ...
- 前端每日实战:131# 视频演示如何用纯 CSS 创作一把剪刀
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GXyGpZ 可交互视频 此视频是可 ...
随机推荐
- Google XSS game writeup
用过Chrome的应该知道它的XSS Auditor,它可是灭掉了不少XSS代码呢……Google对XSS是很有研究的,不然也不敢大张旗鼓的悬赏(7500刀哦亲),还开发了一个XSS小游戏 http: ...
- 用bootstrap和css3制作按钮式下拉菜单
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...
- [暑假集训Day2T3]团建活动
个人认为这周题中较难的一道. 题意大概为:给定一张N个点M条边的无向图,求出无向图的一棵最小生成树,满足一号节点的度数不超过给定的整数K.保证 N <= 20 首先用map存取节点,之后抛去1号 ...
- Day7-----Python的序列类(有子类:元组类,列表类)
序列类型 1.基本介绍: 序列类型是一种基类类型 ,既然被称为那就肯定是有道理的,关于序列 它有 正向 和 反向 两种序号,正向序号从零开始,反向序号从负一开始 a = '例如这个字符串' ...
- Android APP 登陆模块
首先我想强调一点.这个登陆的模块最好是放在另外一个线程里面来实现.否则有可能会爆出一系列的问题, 然后再与主UI 交互.这样就不会爆ANR异常 1.对于登陆模块的.首先大体的逻辑肯定是要清晰的. ...
- 【JMeter5.0】Mac安装JDK和JMeter5
之前讲了Windows下安装JDK和JMeter4.0的方法,其实不论操作系统是Windows.Mac OS.Linux等,JMeter所需要的基础环境配置都是类似的,本文介绍JMeter for M ...
- idea模块搭建新手党常见错误
一.搭建java和web模块会出现的错误(此篇以分布式模块为例) 1.创建空工程 1.点击file ,在弹出的窗口左侧选项中在最后有一个Empty Project选项.此处就是创建空工程. 2.在此空 ...
- 关于linux的日志
日志的三种类型# 内核及系统日志: 这种日志数据由系统服务rsyslog统一管理,根据其主配置文件/etc/rsyslog.conf中的设置决定将内核消息及各种系统程序消息记录到什么位置.系统中有相当 ...
- ssh 操作 esxi 基本命令
1.查看虚拟机: vim-cmd vmsvc/getallvms 会显示当前esxi上的虚拟机数量,没一个都有编号. 2.停用虚拟机:vim-cmd vmsvc/power.suspend + 之前命 ...
- Java虚拟机——Java内存区域与内存溢出
内存区域 Java虚拟机在执行Java程序的过程中会把他所管理的内存划分为若干个不同的数据区域.Java虚拟机规范将JVM所管理的内存分为以下几个运行时数据区:程序计数器.Java虚拟机栈.本地方法栈 ...