<!DOCTYPE html><html lang="en"><h...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>纯CSS3模拟摩天轮效果</title><style> .sunline{ position:relative; height: 400px; width: 400px; border: 2px solid transparent; border-radius: 50%; margin: 50px 0 0 50px; display: flex; animation: rotate 10s infinite linear;}.sun{ height: 100px; width: 100px; margin: auto; background-color: red; border-radius: 50%; box-shadow: 5px 5px 10px red,-5px -5px 10px red,5px -5px 10px red,-5px 5px 10px red;}.earth{ margin: auto; height: 50px; width: 50px; background-color: blue; /*border-radius: 50%;*/ animation: -rotate 10s infinite linear;}@keyframes rotate{ 100%{transform:rotate(360deg);}}@keyframes -rotate{ 100%{transform:rotate(-360deg);}}</style></head><body><div class="box"> <div class="sunline"> <div class="sun"></div> <div class=""> <div class="earth"></div> </div> </div></div></body>
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
