55.纯 CSS 创作一个太阳、地球、月亮的运转模型
原文地址:https://segmentfault.com/a/1190000015313341
感想:主要运用边框、伪元素、动画。
HTML code:
<div class="container">
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
</div>
CSS code:
html, body {
margin:;
padding:;
}
/* 设置body子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
/* 隐藏突出的部分 */
overflow: hidden;
}
/* 设置.container容器尺寸 */
.container{
position: relative;
font-size: 10px;
width: 40em;
height: 40em;
/* border: 1px solid white; */
}
/* 画出太阳 */
.sun{
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
border-radius: 50%;
box-shadow: 0 0 3em white;
background-color: yellow;
}
/* 画出地球和月球的轨迹 */
.earth,
.earth .moon{
position: absolute;
border-width: 0.1em 0.1em 0 0;
border-style: solid;
border-color: white transparent transparent transparent;
border-radius: 50%;
}
.earth{
top: 5em;
left: 5em;
width: 30em;
height: 30em;
/* border: 1px solid white; */
/* 设置动画 orbit: 轨道*/
animation: orbit 36.5s linear infinite;
}
.earth .moon{
top:;
right:;
width: 8em;
height: 8em;
/* border: 1px solid white; */
animation: orbit 2.7s linear infinite;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
/* 用伪元素画出地球和月球 */
.earth::before,
.earth .moon::before{
position: absolute;
content: '';
border-radius: 50%;
}
.earth::before{
top: 2.8em;
right: 2.5em;
width: 3em;
height: 3em;
background-color: aqua;
}
.earth .moon::before{
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
55.纯 CSS 创作一个太阳、地球、月亮的运转模型的更多相关文章
- 前端每日实战:55# 视频演示如何用纯 CSS 创作一个太阳、地球、月亮的运转模型
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RJjQYY 可交互视频 此视频是可 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 69.纯 CSS 创作一个单元素抛盒子的 loader
原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...
- 52.纯 CSS 创作一个小球绕着圆环盘旋的动画
原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...
- 47.纯 CSS 创作一个蝴蝶标本展示框
html,body{ margin:; padding:; } body{ height: 100vh; display: flex; justify-content: center; align-i ...
- 46.纯 CSS 创作一个在容器中反弹的小球
原文地址:https://segmentfault.com/a/1190000015221260 练习地址:https://scrimba.com/c/c3GEWmTb 感想: 原来animation ...
- 42.纯 CSS 创作一个均衡器 loader 动画
原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...
随机推荐
- 关于JFame 屏幕居中显示的问题
场景: 在利用 JAVA 的 Swing 开发 C/S 架构 的前端界面 目的: 想让 JFrame 居中显示在整个 屏幕的正中位置 方法一:JFrame frame = new JFr ...
- [转]一图读懂JVM架构解析
每个Java开发人员都知道字节码经由JRE(Java运行时环境)执行.但他们或许不知道JRE其实是由Java虚拟机(JVM)实现,JVM分析字节码,解释并执行它.作为开发人员,了解JVM的架构是非常重 ...
- tarroni music
1,tarroni http://www.tarronishoes.it/audio.php 2, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 读取 Excel 之 Epplus
using (OpenFileDialog fd = new OpenFileDialog()) { fd.Filter = "Excel 2007文件(*.xlsx)|*.xlsx|所有文 ...
- HTML代码优化中SEO要注意哪些细节
本文来源于学业无忧网,转载请保留:http://www.ixywy.com/ 这段时间,我们翻阅了一些同行撰写的书.其中,几乎每本书都存在问题.这个肯定在所难免,但是作为一名职业的SEO更应该注意一些 ...
- Ajax传参讲解
客户端和服务器 1.请求:request 2.响应:response 服务器响应事件:onreadystatechange() send() 用于向后台传递参数: Ajax的请求方式 get: ...
- IP网络设计
一.总体规划 网络设计的分层思想 按照网络设计的分层思想,通常将网络分为:核心层.汇聚层和接入层三个部分.这三部分在功能上有明显差别 ,因此在IP设计上,有必要对这三个部分区别对待. 二.核心层 核心 ...
- Java中的局部变量、成员变量和静态变量
直接看代码 public class Variable { // 静态变量,属于类的变量,且用关键字static声明,不属于实例,虽然可以通过实例来调用,但是不建议 private static in ...
- 基于线程池的多并发Socket程序的实现
Socket“服务器-客户端”模型的多线程并发实现效果的大体思路是:首先,在Server端建立“链接循环”,每一个链接都开启一个“线程”,使得每一个Client端都能通过已经建立好的线程来同时与Ser ...
- [UE4]移除UI(User Widget)并销毁
1.移除UI,使用“Remove from Parent”方法 2.最后一步给UI变量赋值的时候,如果保持默认选择“Select Assets”,则会把UI变量销毁(赋值为null).