原文地址: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 创作一个太阳、地球、月亮的运转模型的更多相关文章

  1. 前端每日实战:55# 视频演示如何用纯 CSS 创作一个太阳、地球、月亮的运转模型

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

  2. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  3. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  4. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  5. 69.纯 CSS 创作一个单元素抛盒子的 loader

    原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...

  6. 52.纯 CSS 创作一个小球绕着圆环盘旋的动画

    原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...

  7. 47.纯 CSS 创作一个蝴蝶标本展示框

    html,body{ margin:; padding:; } body{ height: 100vh; display: flex; justify-content: center; align-i ...

  8. 46.纯 CSS 创作一个在容器中反弹的小球

    原文地址:https://segmentfault.com/a/1190000015221260 练习地址:https://scrimba.com/c/c3GEWmTb 感想: 原来animation ...

  9. 42.纯 CSS 创作一个均衡器 loader 动画

    原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...

随机推荐

  1. Ubuntu 14.04 下安装 MongoDB 服务器 和 PHP MongoDB Driver 数据驱动

    https://laravel-china.org/topics/309/install-mongodb-server-and-php-mongodb-driver-data-driver-under ...

  2. Laravel 输出最后一条sql

    $queries = DB::getQueryLog(); $last_query = end($queries); print_r( $last_query);

  3. Java ArrayList排序方法详解

    由于其功能性和灵活性,ArrayList是 Java 集合框架中使用最为普遍的集合类之一.ArrayList 是一种 List 实现,它的内部用一个动态数组来存储元素,因此 ArrayList 能够在 ...

  4. 【java】之获取HTTP请求的值常用方法

    logger.info("销帐完成通知回调,请求URL:"+req.getRequestURI().toString()); InputStream in = req.getInp ...

  5. java高并发编程(一)

    读马士兵java高并发编程,引用他的代码,做个记录. 一.分析下面程序输出: /** * 分析一下这个程序的输出 * @author mashibing */ package yxxy.c_005; ...

  6. 数据库SQL语言学习--上机练习4(视图)

    上机练习4 一.实验目的 . 熟悉和掌握对数据表中视图的查询操作和 SQL 命令的使用: . 熟悉和掌握对数据表中视图的更新操作和 SQL 命令的使用,并注意视图更新与基本表更新的区别与联系: . 学 ...

  7. go中的无限极分类的问题

    最近在开发的过程中遇到一个无限极分类的问题,这种问题在php中写过很多,想着很简单,3-5分钟就能解决,结果竟然写了半小时,既然这样,就把这个给总结下. 思路 1.循环数据,放到hash中,把标识的数 ...

  8. PopupWindows 在2.3.3下报java.lang.NullPointerException

    03-05 01:20:56.040: E/AndroidRuntime(1396): java.lang.NullPointerException 03-05 01:20:56.040: E/And ...

  9. 微信7.0以上版本fiddler、Charles抓包报HTTPS证书信任问题通报

    通报:微信更新到7.0以后抓包公众号会有证书问题,抓包小程序直接不能打开 各位不用到处找了,也不用怀疑人生了,你没有问题.win10也没有问题.fiddler和Charles也没有问题,是因为微信更新 ...

  10. win7运行bat文件 一闪而过 解决 必须要将生成器放在C盘等没有中文的目录里

    1.在*.bat所在的文件夹按住shift 键然后鼠标右键,选择“在此处打开命令窗口”, 2.输入bat文件名称然后回车 这样就不会自动消失(只在win7 x64 上尝试过)