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

感想: 动画,背景颜色

HTML code:

  1. <div class="sky">
  2. <div class="sun"></div>
  3. <div class="moon"></div>
  4. </div>

CSS code:

  1. html, body {
  2. margin:;
  3. padding:;
  4. }
  5. .sky{
  6. position: relative;
  7. width: 100vw;
  8. height: 100vh;
  9. /* 让子元素垂直居中 */
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. background-color: skyblue;
  14. animation: animate-sky 10s linear infinite;
  15. /* 隐藏滚动条 */
  16. overflow: hidden;
  17. }
  18. /* 太阳与月亮共同点 */
  19. .sun,.moon{
  20. position: absolute;
  21. width: 50vmin;
  22. height: 50vmin;
  23. border-radius: 50%;
  24. animation: 10s linear infinite;
  25. }
  26. /* 太阳 */
  27. .sun{
  28. background-color: gold;
  29. animation-name: animate-sun;
  30. }
  31. /* 月亮 */
  32. .moon{
  33. background-color: slategray;
  34. animation-name: animate-moon;
  35. /* transform: translateX(-55vmin);*/
  36. }
  37. @keyframes animate-sky{
  38. 50%{
  39. background-color: black;
  40. }
  41. }
  42. @keyframes animate-sun{
  43. 50%{
  44. box-shadow: 0 0 5em 1em white;
  45. }
  46. }
  47. @keyframes animate-moon{
  48. from{
  49. transform: translateX(-100vmin);
  50. }
  51. 50%{
  52. background-color: black;
  53. }
  54. to{
  55. transform: translateX(100vmin);
  56. }
  57. }

36纯 CSS 动画原理,在页面上表现日蚀现象的更多相关文章

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

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

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

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

  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. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

  7. 纯CSS让overflow:auto页面滚动条出现时不跳动

    现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...

  8. 纯css实现图片或者页面变灰色

    前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...

  9. vue css动画原理

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

随机推荐

  1. tomcat源码 StandardServer

    在执行org.apache.catalina.startup.Catalina#load的时候会执行org.apache.catalina.core.StandardServer#init,然后会调到 ...

  2. Centos 安装Sublime text 3

    1.下载sublime3 http://www.sublimetext.com/3 2.解压缩,即为安装. # cd /opt # tar xjf /home/alex/Downloads/subli ...

  3. 【剑指offer】输出链表倒数第K个元素

    /* public class ListNode { int val; ListNode next = null; ListNode(int val) { this.val = val; } }*/ ...

  4. vc++获取网页源码

    1. 获取网页源码的步骤: com组件的初始化 创建WinHttpRequest对象 创建并实例化WinHttpRequest组件 调用Open方法打开连接 调用Send方法发送请求 使用Respon ...

  5. 将 GitHub 的某人的特定仓库复制到自己的账户下 的方法

    访问仓库页面,点击 Fork 按钮创建自己的仓库 Fork 就是将 GitHub 的某个特定仓库复制到自己的账户下. Fork 出的仓库与原仓库是两个不同的仓库,开发者可以随意编辑. 新建的仓库名为& ...

  6. 服务网关zuul之二:过滤器--请求过滤执行过程(源码分析)

    Zuul的核心是一系列的过滤器,这些过滤器可以完成以下功能: 身份认证与安全:识别每个资源的验证要求,并拒绝那些与要求不符的请求. 审查与监控:在边缘位置追踪有意义的数据和统计结果,从而带来精确的生成 ...

  7. DevOps安装、部署持续集成

    1.重启docker服务,开启iptables转发功能 # systemctl start docker # vi /etc/sysctl.conf # sysctl -p [root@localho ...

  8. [UE4]世界坐标和相对坐标

    一.世界坐标:相对于整个世界的坐标 二.相对坐标是相对于组件父级的坐标.如下图: 1.Mesh组件和CameraPositionArrow组件的相对坐标是相对于Root组件的坐标 2.Cube组件的相 ...

  9. 2012 - AD GC全局编录服务器(Global Catalog)

    普通域控制器只记录本域对象的信息,而GC全局编录服务器则不仅记录本域所有对象的只读信息,还记录林中所有其他域中部分域对象的只读信息.   GC全局编录服务器作用: 1,存储对象信息副本,提高搜索性能: ...

  10. php namespace use 研究

    1.file1.php: <?php namespace foos; class demo{ function testfn(){ echo "sdlkfjskdjf"; } ...