旋转的星球
代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { -webkit-transform: scale(0.5); transform: scale(0.5); position: relative; padding: 1px; height: 300px; width: 300px; } .sunline { position: relative; height: 400px; width: 400px; border: 2px solid black; border-radius: 50%; -webkit-animation: rotate 10s infinite linear; animation: rotate 10s infinite linear; } .sun { height: 100px; width: 100px; margin: 50% 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: red; border-radius: 50%; -webkit-box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red; box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red; } .earthline { position: absolute; right: 0; top: 50%; height: 200px; width: 200px; margin: -100px -100px 0 0; border: 1px solid black; border-radius: 50%; -webkit-animation: rotate 2s infinite linear; animation: rotate 2s infinite linear; } .earth { margin: 50% 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 50px; width: 50px; background-color: blue; border-radius: 50%; } .moon { position: absolute; left: 0; top: 50%; height: 20px; width: 20px; margin: -10px 0 0 -10px; background-color: black; border-radius: 50%; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 100% { transform: rotate(360deg); } } @media (max-width:700px) { .box{width:50%;box-sizing: border-box;} } </style> </head> <body> <div class="box"> <div class="sunline"> <div class="sun"></div> <div class="earthline"> <div class="earth"></div> <div class="moon"></div> </div> </div> </div> </body> </html>
进阶应用
在内侧旋转的球内放文本,并且文本不跟着旋转,鼠标移入后,动画停止;移出时,动画继续
效果如下:
大海
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title> <style> @keyframes spin { 100% { transform: rotate(1turn); } } .outer { margin: 20px 0 0 20px; width: 100px; height: 100px; background-color: pink; border-radius: 50%; animation: spin 3s linear infinite; animation-play-state: running; text-align: center; } .inner { width: 40px; height: 40px; line-height: 40px; background-color: tan; border-radius: 50%; animation: inherit; animation-direction: reverse; } div:hover, div:focus { animation-play-state: paused; } </style> </head> <body> <div class="outer"> <div class="inner">大海</div> </div> </body> </html>
评论前必须登录!
注册