36纯 CSS 动画原理,在页面上表现日蚀现象
原文地址:https://segmentfault.com/a/1190000015070543
感想: 动画,背景颜色
HTML code:
- <div class="sky">
- <div class="sun"></div>
- <div class="moon"></div>
- </div>
CSS code:
- html, body {
- margin:;
- padding:;
- }
- .sky{
- position: relative;
- width: 100vw;
- height: 100vh;
- /* 让子元素垂直居中 */
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: skyblue;
- animation: animate-sky 10s linear infinite;
- /* 隐藏滚动条 */
- overflow: hidden;
- }
- /* 太阳与月亮共同点 */
- .sun,.moon{
- position: absolute;
- width: 50vmin;
- height: 50vmin;
- border-radius: 50%;
- animation: 10s linear infinite;
- }
- /* 太阳 */
- .sun{
- background-color: gold;
- animation-name: animate-sun;
- }
- /* 月亮 */
- .moon{
- background-color: slategray;
- animation-name: animate-moon;
- /* 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);
- }
- }
36纯 CSS 动画原理,在页面上表现日蚀现象的更多相关文章
- 前端每日实战:36# 视频演示如何利用 CSS 动画原理,在页面上表现日蚀现象
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教程 此视频 ...
- 如何利用 CSS 动画原理,在页面上表现日蚀现象
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教 ...
- Vue的css动画原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS动画原理及硬件加速
一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...
- vue中css动画原理
显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...
- 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...
- 纯CSS让overflow:auto页面滚动条出现时不跳动
现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...
- 纯css实现图片或者页面变灰色
前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...
- vue css动画原理
从隐藏到显现 从显现到隐藏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- tomcat源码 StandardServer
在执行org.apache.catalina.startup.Catalina#load的时候会执行org.apache.catalina.core.StandardServer#init,然后会调到 ...
- Centos 安装Sublime text 3
1.下载sublime3 http://www.sublimetext.com/3 2.解压缩,即为安装. # cd /opt # tar xjf /home/alex/Downloads/subli ...
- 【剑指offer】输出链表倒数第K个元素
/* public class ListNode { int val; ListNode next = null; ListNode(int val) { this.val = val; } }*/ ...
- vc++获取网页源码
1. 获取网页源码的步骤: com组件的初始化 创建WinHttpRequest对象 创建并实例化WinHttpRequest组件 调用Open方法打开连接 调用Send方法发送请求 使用Respon ...
- 将 GitHub 的某人的特定仓库复制到自己的账户下 的方法
访问仓库页面,点击 Fork 按钮创建自己的仓库 Fork 就是将 GitHub 的某个特定仓库复制到自己的账户下. Fork 出的仓库与原仓库是两个不同的仓库,开发者可以随意编辑. 新建的仓库名为& ...
- 服务网关zuul之二:过滤器--请求过滤执行过程(源码分析)
Zuul的核心是一系列的过滤器,这些过滤器可以完成以下功能: 身份认证与安全:识别每个资源的验证要求,并拒绝那些与要求不符的请求. 审查与监控:在边缘位置追踪有意义的数据和统计结果,从而带来精确的生成 ...
- DevOps安装、部署持续集成
1.重启docker服务,开启iptables转发功能 # systemctl start docker # vi /etc/sysctl.conf # sysctl -p [root@localho ...
- [UE4]世界坐标和相对坐标
一.世界坐标:相对于整个世界的坐标 二.相对坐标是相对于组件父级的坐标.如下图: 1.Mesh组件和CameraPositionArrow组件的相对坐标是相对于Root组件的坐标 2.Cube组件的相 ...
- 2012 - AD GC全局编录服务器(Global Catalog)
普通域控制器只记录本域对象的信息,而GC全局编录服务器则不仅记录本域所有对象的只读信息,还记录林中所有其他域中部分域对象的只读信息. GC全局编录服务器作用: 1,存储对象信息副本,提高搜索性能: ...
- php namespace use 研究
1.file1.php: <?php namespace foos; class demo{ function testfn(){ echo "sdlkfjskdjf"; } ...