web旋转动画

来源：互联网发布：中兴软件开发怎么样编辑：程序博客网时间：2024/05/19 17:06
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><style type="text/css">body{text-align: center;}div{display: inline-block;}.box{display: inline-block;width: 1000px;height: 500px;position: relative;text-align: center;}.child{top: 100px;text-align: center;width: 440px;height: 440px;position: relative;-webkit-animation: myrotate 86400s infinite;}/*太阳*/.child > div:nth-child(1){transform: translate(-50%,-50%);position: absolute;top: 50%;border-radius: 50%;width: 80px;height: 80px;background: red;}/*地球和月亮的div*/.child > div:nth-child(2){z-index: 1;top: 120px;left: 50px;width: 60px;height: 60px;position: absolute;text-align: center;animation: childrotate 86400s infinite;}/*地球*/.child > div > div:nth-child(1){width: 20px;height: 20px;background: green;border-radius: 50%;position: absolute;top: 50%;transform: translate(-50%,-50%);}/*月亮，最小的*/.child > div >div:nth-child(2){border-radius: 50%;width: 10px;height: 10px;background: dimgray;position: absolute;}.child > div:nth-child(3){transform: translate(-50%,-50%);position: absolute;top: 50%;border-radius: 50%;width: 310px;height: 310px;border: 1px solid gray;background: transparent;}@keyframes myrotate{/*在规定的时间内，完成4000000度的旋转*/0%{-webkit-transform: rotate(0deg);}100%{-webkit-transform: rotate(4000000deg);}}@keyframes childrotate{/*在规定的时间内，完成50000000度的旋转*/0%{-webkit-transform: rotate(0deg);}100%{-webkit-transform: rotate(50000000deg);}}</style></head><body><div class="box"><div class="child"><div></div><div><div></div><div></div></div><div></div><div></div></div></div></body></html>
效果gif图：
0 0