前端每日实战: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 可交互视频 此视频是可 ...
随机推荐
- Convolutional Neural Networks(4):Feature map size,Padding and Stride
在CNN(1)中,我们用到下图来说明卷积之后feature maps尺寸和深度的变化.这一节中,我们讨论feature map size, padding and stride. 首先,在Layer1 ...
- 20190821 On Java8 第十一章 内部类
第十一章 内部类 一个定义在另一个类中的类,叫作内部类. 链接外部类 内部类是一种名字隐藏和组织代码的模式. 内部类拥有其外围类的所有元素的访问权. 内部类 .this 和 .new的使用 this: ...
- 《JAVA设计模式》之抽象工厂模式(Abstract Factory)
场景问题 举个生活中常见的例子——组装电脑,我们在组装电脑的时候,通常需要选择一系列的配件,比如CPU.硬盘.内存.主板.电源.机箱等.为讨论使用简单点,只考虑选择CPU和主板的问题. 事实上,在选择 ...
- 二叉树BinTree4种遍历及其应用
前序遍历 template<class T> void BinTree<T>::PreOrder(BinTreeNode<T>*subTree){ //前序遍历以s ...
- [fw]linux 下如何查看和踢除正在登陆的其它用户
linux 下如何查看和踢除正在登陆的其它用户 Posted on 2011/09/01 如何在linux下查看当前登录的用户,并且踢掉你认为应该踢掉的用户?请使用who这个命令来查看当前正在登录 ...
- G a+b+c+d=?
G a+b+c+d=? 链接:https://ac.nowcoder.com/acm/contest/338/G来源:牛客网 题目描述 This is a very simple problem! Y ...
- 关于自带的sql developer修改java.exe版本的解决办法
第一次安装oracle11gR2后,就很好奇的点了一下,当点击应用程序开发下的sql developer后,就弹出一个窗口,要选择一个java.exe的路径,我就讲本机中的JDK1.7下的java.e ...
- 32.Group Anagrams(相同元素的不同组合)
Level: Medium 题目描述: Given an array of strings, group anagrams together. Example: Input: ["eat ...
- Winfrom传值 分类: C# 2015-07-22 15:41 1人阅读 评论(0) 收藏
以前对WinForm窗体显示和窗体间传值了解不是很清楚 最近做了一些WinForm项目,把用到的相关知识整理如下 A.WinForm中窗体显示 显示窗体可以有以下2种方法: Form.Show ...
- SVN中trunk,branches,tags的使用明细--项目代码的管理
SVN在项目开发过程中有两种模式: 第一种:Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/,那么标准的svn布局svn://proj/|+ ...