效果预览

在线演示

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

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;
}

大功告成!

原文地址:https://segmentfault.com/a/1190000015070543

如何利用 CSS 动画原理,在页面上表现日蚀现象的更多相关文章

  1. 前端每日实战:36# 视频演示如何利用 CSS 动画原理,在页面上表现日蚀现象

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

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

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

  3. Vue的css动画原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS动画原理及硬件加速

    一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...

  5. vue中css动画原理

    显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...

  6. vue css动画原理

    从隐藏到显现 从显现到隐藏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  7. Css实现Div在页面上垂直居中显示

    方法一 <html>    <head>        <title>垂直居中</title>        <style type=" ...

  8. 利用css去除input按钮上的文字的几种方法

    相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...

  9. 深入浅出 CSS 动画

    本文将比较全面细致的梳理一下 CSS 动画的方方面面,针对每个属性用法的讲解及进阶用法的示意,希望能成为一个比较好的从入门到进阶的教程. CSS 动画介绍及语法 首先,我们来简单介绍一下 CSS 动画 ...

随机推荐

  1. extern使用方法总结!(转)

    extern 在源文件A里定义的函数,在其它源文件里是看不见的(即不能访问).为了在源文件B里能调用这个函数,应该在B的头部加上一个外部声明: extern   函数原型: 这样,在源文件B里也可以调 ...

  2. mysql8必知必会7 连接 内连接 外连接 交叉连接

    /* 2 需求:建立产品和分类表 1.查询每种分类的产品数量,没有产品的分类也要统计.(cname,quantity) 2.根据分类名称查询分类中的所有产品 */ -- --------------- ...

  3. B - Dungeon Master POJ - 2251

    //纯bfs #include <iostream> #include <algorithm> #include <cstring> #include <cs ...

  4. ios wkwebview同步cookie ajax请求偶尔异常问题

    let config = WKWebViewConfiguration.init() config.preferences = WKPreferences.init() config.preferen ...

  5. [題解]luogu_P1333瑞瑞的木棍(并查集/圖論)

    是一道歐拉路的題竟然沒看出來...... 把每種顏色看成一個點,每根木棍看成一個邊,即相同顏色在圖中接好合併成了一個點, 問題轉化為了求是否存在歐拉路 如果用map會超時,所以可以用字典樹實現離散化/ ...

  6. 洛谷P4095||bzoj3163 [HEOI2013]Eden 的新背包问题

    https://www.luogu.org/problemnew/show/P4095 不太会.. 网上有神奇的做法: 第一种其实是暴力(复杂度3e8...)然而可以A.考虑多重背包,发现没有办法快速 ...

  7. 命令行视频下载工具 you-get 和 youtube-dl

    you-get 和 youtube-dl 都是基于 Python 的命令行媒体文件下载工具,完全开源免费跨平台.用户只需使用简单命令并提供在线视频的网页地址即可让程序自动进行嗅探.下载.合并.命名和清 ...

  8. 命令行媒体处理工具 FFmpeg

    FFmpeg 是一套在命令行界面运行的跨平台媒体处理工具,属于自由软件,常用来对视频音频和图片等媒体文件进行格式转换.分割和合并等,也可录屏录音. 开发语言:C官网:https://www.ffmpe ...

  9. 112 Path Sum 路径总和

    给定一棵二叉树和一个总和,确定该树中是否存在根到叶的路径,这条路径的所有值相加等于给定的总和.例如:给定下面的二叉树和 总和 = 22,              5             / \  ...

  10. git stash暂存当前正在进行的工作

    git stash 可用来暂存当前正在进行的工作, 比如想pull 最新代码, 又不想加新commit, 或者另外一种情况,为了fix 一个紧急的bug,  先stash, 使返回到自己上一个comm ...