<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Planet</title>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
background: #204;
overflow: hidden;
}
.bg * {
line-height: 0;
}
.bg span {
position: absolute;
display: inline-block;
transform: translate(-50%, -50%);
text-align: center;
}
.bg div {
position: absolute;
top: 50%;
left: 61.8%;
transform-origin: 0 0;
animation-name: planet;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes planet {
from {
transform: rotate(0) translate(-50%, -50%) scale(0.5);
}
to {
transform: rotate(360deg) translate(-50%, -50%) scale(0.5);
}
}
.sun {
position: absolute;
display: inline-block;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
text-align: center;
background-color: #fdf3c2;
box-shadow: 0 0 80px #ff0;
border-radius: 100%;
}
.sun-light {
position: absolute;
display: inline-block;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
text-align: center;
background-color: #fdf3c2;
box-shadow: 0 0 150px #f80;
border-radius: 100%;
}
.mercury {
animation-duration: 2s;
font-size: 24px;
width: 90px;
height: 90px;
color: #eeca8e;
text-shadow: 0 0 40px #fff;
}
.venus {
animation-duration: 3s;
font-size: 48px;
width: 140px;
height: 140px;
color: #feeebb;
text-shadow: 0 0 50px #fff;
}
.earth {
animation-duration: 5s;
font-size: 48px;
width: 220px;
height: 220px;
color: #60e1ff;
text-shadow: 0 0 50px #0ff;
}
.moon {
animation-duration: 2s;
font-size: 20px;
width: 80px;
height: 80px;
color: #e2e2e2;
text-shadow: 0 0 20px #fff;
}
.mars {
animation-duration: 11s;
font-size: 24px;
width: 320px;
height: 320px;
color: #ff6840;
text-shadow: 0 0 40px #f00;
}
.jupiter {
animation-duration: 19s;
font-size: 96px;
width: 460px;
height: 460px;
color: #fcbabc;
text-shadow: 0 0 100px #fcc;
}
.io {
animation-duration: 2s;
width: 100px;
height: 100px;
font-size: 12px;
color: #e2e2e2;
}
.europa {
animation-duration: 3s;
width: 125px;
height: 125px;
font-size: 12px;
color: #e2e2e2;
}
.ganymede {
animation-duration: 5s;
font-size: 18px;
color: #e2e2e2;
width: 150px;
height: 150px;
text-shadow: 0 0 30px #fff;
}
.callisto {
animation-duration: 7s;
width: 200px;
height: 200px;
font-size: 12px;
color: #e2e2e2;
}
.saturn {
animation-duration: 41s;
font-size: 64px;
width: 640px;
height: 640px;
color: #f5d57e;
text-shadow: 0 0 100px #ec8;
}
</style>
<style>
.login-form {
position: absolute;
top: 50%;
left: 38.2%;
transform: translate(-50%, -50%);
background-color: #fff2;
color: #fff;
border-radius: 10px;
font-size: 18pt;
}
.login-title{
margin: 10px 15px;
}
.button-padding{
padding: 10px 15px;
}
.button-margin{
margin: 10px 15px;
}
input {
width: 350px;
font-size: inherit;
display: block;
background-color: #fff2;
outline: none;
border: 0;
color: inherit;
border-radius: 10px;
}
button{
font-size: inherit;
background-color: #fff2;
outline: none;
border: 0;
color: inherit;
border-radius: 1em;
}
</style>
</head>
<body>
<div class="bg">
<div class="mercury">
<span>⬤</span>
</div>
<div class="venus">
<span>⬤</span>
</div>
<div class="earth">
<div class="moon" style="top:0;left:0;"><span>⬤</span></div>
<span>⬤</span>
</div>
<div class="mars">
<span>⬤</span>
</div>
<div class="jupiter">
<div class="io" style="top:0;left:0;"><span>⬤</span></div>
<div class="europa" style="top:0;left:0;"><span>⬤</span></div>
<div class="ganymede" style="top:0;left:0;"><span>⬤</span></div>
<div class="callisto" style="top:0;left:0;"><span>⬤</span></div>
<span>⬤</span>
</div>
<div class="saturn">
<span>⬤</span>
</div>
<div>
<span class="sun-light"></span>
<span class="sun"></span>
</div>
</div>
<form class="login-form">
<input name="name" class="button-padding button-margin" placeholder="输入用户名">
<input name="phone" class="button-padding button-margin" placeholder="输入手机号">
<button class="button-padding button-margin">验证码</button>
<input name="code" class="button-padding button-margin" style="display: inline;width: 200px;float: right;" placeholder="输入验证码">
<input name="password" class="button-padding button-margin" placeholder="输入密码">
<input class="button-padding button-margin" placeholder="再次输入密码">
<button class="button-padding button-margin" style="float: right;">立刻注册</button>
</form>
</body>
</html>
css行星旋转 无脚本
猜你喜欢
转载自blog.csdn.net/dscn15848078969/article/details/113811102
今日推荐
周排行