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 ...
随机推荐
- Ubuntu 14.04 下安装 MongoDB 服务器 和 PHP MongoDB Driver 数据驱动
https://laravel-china.org/topics/309/install-mongodb-server-and-php-mongodb-driver-data-driver-under ...
- Laravel 输出最后一条sql
$queries = DB::getQueryLog(); $last_query = end($queries); print_r( $last_query);
- Java ArrayList排序方法详解
由于其功能性和灵活性,ArrayList是 Java 集合框架中使用最为普遍的集合类之一.ArrayList 是一种 List 实现,它的内部用一个动态数组来存储元素,因此 ArrayList 能够在 ...
- 【java】之获取HTTP请求的值常用方法
logger.info("销帐完成通知回调,请求URL:"+req.getRequestURI().toString()); InputStream in = req.getInp ...
- java高并发编程(一)
读马士兵java高并发编程,引用他的代码,做个记录. 一.分析下面程序输出: /** * 分析一下这个程序的输出 * @author mashibing */ package yxxy.c_005; ...
- 数据库SQL语言学习--上机练习4(视图)
上机练习4 一.实验目的 . 熟悉和掌握对数据表中视图的查询操作和 SQL 命令的使用: . 熟悉和掌握对数据表中视图的更新操作和 SQL 命令的使用,并注意视图更新与基本表更新的区别与联系: . 学 ...
- go中的无限极分类的问题
最近在开发的过程中遇到一个无限极分类的问题,这种问题在php中写过很多,想着很简单,3-5分钟就能解决,结果竟然写了半小时,既然这样,就把这个给总结下. 思路 1.循环数据,放到hash中,把标识的数 ...
- 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 ...
- 微信7.0以上版本fiddler、Charles抓包报HTTPS证书信任问题通报
通报:微信更新到7.0以后抓包公众号会有证书问题,抓包小程序直接不能打开 各位不用到处找了,也不用怀疑人生了,你没有问题.win10也没有问题.fiddler和Charles也没有问题,是因为微信更新 ...
- win7运行bat文件 一闪而过 解决 必须要将生成器放在C盘等没有中文的目录里
1.在*.bat所在的文件夹按住shift 键然后鼠标右键,选择“在此处打开命令窗口”, 2.输入bat文件名称然后回车 这样就不会自动消失(只在win7 x64 上尝试过)