原文地址: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: 0; padding: 0; } /* 设置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: 0; right: 0; 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; }