效果预览

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

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 动画原理,在页面上表现日蚀现象的更多相关文章

  1. 如何利用 CSS 动画原理,在页面上表现日蚀现象

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

  2. 36纯 CSS 动画原理,在页面上表现日蚀现象

    原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...

  3. 前端每日实战:31# 视频演示如何利用 CSS 的动画原理,创作一个乒乓球对打动画

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

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

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

  5. 前端每日实战:37# 视频演示如何把握好 transition 和 animation 的时序,创作描边按钮特效

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

  6. 前端每日实战:91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader

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

  7. 前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪

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

  8. 前端每日实战:152# 视频演示如何用纯 CSS 创作一个圆点错觉效果

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

  9. 前端每日实战:131# 视频演示如何用纯 CSS 创作一把剪刀

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

随机推荐

  1. Convolutional Neural Networks(4):Feature map size,Padding and Stride

    在CNN(1)中,我们用到下图来说明卷积之后feature maps尺寸和深度的变化.这一节中,我们讨论feature map size, padding and stride. 首先,在Layer1 ...

  2. 20190821 On Java8 第十一章 内部类

    第十一章 内部类 一个定义在另一个类中的类,叫作内部类. 链接外部类 内部类是一种名字隐藏和组织代码的模式. 内部类拥有其外围类的所有元素的访问权. 内部类 .this 和 .new的使用 this: ...

  3. 《JAVA设计模式》之抽象工厂模式(Abstract Factory)

    场景问题 举个生活中常见的例子——组装电脑,我们在组装电脑的时候,通常需要选择一系列的配件,比如CPU.硬盘.内存.主板.电源.机箱等.为讨论使用简单点,只考虑选择CPU和主板的问题. 事实上,在选择 ...

  4. 二叉树BinTree4种遍历及其应用

    前序遍历 template<class T> void BinTree<T>::PreOrder(BinTreeNode<T>*subTree){ //前序遍历以s ...

  5. [fw]linux 下如何查看和踢除正在登陆的其它用户

    linux 下如何查看和踢除正在登陆的其它用户 Posted on 2011/09/01   如何在linux下查看当前登录的用户,并且踢掉你认为应该踢掉的用户?请使用who这个命令来查看当前正在登录 ...

  6. 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 ...

  7. 关于自带的sql developer修改java.exe版本的解决办法

    第一次安装oracle11gR2后,就很好奇的点了一下,当点击应用程序开发下的sql developer后,就弹出一个窗口,要选择一个java.exe的路径,我就讲本机中的JDK1.7下的java.e ...

  8. 32.Group Anagrams(相同元素的不同组合)

    Level:   Medium 题目描述: Given an array of strings, group anagrams together. Example: Input: ["eat ...

  9. Winfrom传值 分类: C# 2015-07-22 15:41 1人阅读 评论(0) 收藏

    以前对WinForm窗体显示和窗体间传值了解不是很清楚  最近做了一些WinForm项目,把用到的相关知识整理如下  A.WinForm中窗体显示  显示窗体可以有以下2种方法:  Form.Show ...

  10. SVN中trunk,branches,tags的使用明细--项目代码的管理

    SVN在项目开发过程中有两种模式: 第一种:Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/,那么标准的svn布局svn://proj/|+ ...