console
<div class="planets">
<div class="red">
<span class="circles_red"></span>
<span class="eyes_red"></span>
</div>
<div class="green">
<span class="circles_green"></span>
<span class="eyes_green"></span>
</div>
<div class="yellow">
<span class="circles_yellow"></span>
<span class="eyes_yellow"></span>
</div>
<div class="earth">
<span class="snow"></span>
<span class="eyes_earth"></span>
</div>
<div class="moon">
<span class="circles_moon"></span>
<span class="eyes_moon"></span>
</div>
</div>
<div class="sbTitle">
中国傻逼中心
</div>
<div class="sb">
<p class="div1">
<b class="f1">兹证明 HTML-一堆白菜 是傻逼一名， 特发此证，予以证明。</b>
<b class="f2">杭州市第七人民医院</b>
</p>
</div>
<div class="sb">
<p class="div1">
<b class="f1">兹证明 HTML5～鈎 是傻逼一名， 特发此证，予以证明。</b>
<b class="f2">杭州市第七人民医院</b>
</p>
</div>
<div class="sb">
<p class="div1">
<b class="f1">兹证明 HTML5-九神 是傻逼一名， 特发此证，予以证明。</b>
<b class="f2">杭州市第七人民医院</b>
</p>
</div>
<div class="sb">
<p class="div1">
<b class="f1">兹证明 html5－聪 是傻逼一名， 特发此证，予以证明。</b>
<b class="f2">杭州市第七人民医院</b>
</p>
</div>
<div class="sb">
<p class="div1">
<b class="f1">兹证明 HTML5-大瑶 是傻逼一名， 特发此证，予以证明。</b>
<b class="f2">杭州市第七人民医院</b>
</p>
</div>
<div class="sb">
<p class="div1">
<b class="f1">兹证明 HTML5-萧潇 是傻逼一名， 特发此证，予以证明。</b>
<b class="f2">杭州市第七人民医院</b>
</p>
</div>
.sbTitle {
text-align: center;
font-size: 40px;
color: #fff;
margin-top: -159px;
text-shadow: #000000 3px 2px 4px;
}
.sb {
margin: auto;
margin-top: 10px;
font-size: 12px;
width: 200px;
color: #212121;
background: #1896c7;
border: 3px solid #FFF;
border-radius: 3px;
height: 102px;
padding: 30px;
}
.f1 {}
.f2 {
margin-top: 55px;
display: inline;
float: right;
}
html {
background: #07121b url(http://www.amrzek.com/space.png) repeat 0px 0px;
height: 100vh;
animation: space 15s linear infinite;
-webkit-animation: space 15s linear infinite;
-moz-animation: space 15s linear infinite;
-o-animation: space 15s linear infinite;
}
@keyframes space {
from {
background-position: 0px 0px;
}
to {
background-position: -700px 0px;
}
}
@-webkit-keyframes space {
from {
background-position: 0px 0px;
}
to {
background-position: -700px 0px;
}
}
@-moz-keyframes space {
from {
background-position: 0px 0px;
}
to {
background-position: -700px 0px;
}
}
@-o-keyframes space {
from {
background-position: 0px 0px;
}
to {
background-position: -700px 0px;
}
}
.planets {
width: 100%;
height: 350px;
position: relative;
margin-top: 30px;
z-index: -1;
}
.planets * {
border-radius: 50%;
-webkit-border-radius: 50%;
transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
}
.red {
background: #BC2626;
width: 260px;
height: 260px;
position: absolute;
overflow: hidden;
left: 0px;
top: 60px;
z-index: 9;
}
.red:before {
position: absolute;
content: '';
background: #941717;
width: 80px;
height: 110px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 140px;
right: -20px;
z-index: 8;
box-shadow: 6px -3px 0px #7E1010 inset;
}
.red:after {
position: absolute;
content: '';
background: #941717;
width: 100px;
height: 60px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 230px;
right: 90px;
z-index: 8;
box-shadow: 11px 1px 0px #7E1010 inset;
}
.circles_red {
background: #941717;
width: 150px;
height: 90px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: -34px;
right: 130px;
position: absolute;
display: block;
z-index: 8;
box-shadow: 11px -5px 0px #7E1010 inset;
}
.circles_red:before {
content: '';
background: #941717;
width: 80px;
height: 60px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 136px;
right: -30px;
position: absolute;
z-index: 8;
box-shadow: 4px -7px 0px #7E1010 inset;
}
.circles_red:after {
content: '';
background: #941717;
width: 80px;
height: 60px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 170px;
right: 98px;
z-index: 8;
position: absolute;
box-shadow: 4px -7px 0px #7E1010 inset;
}
.earth {
background: #7ecded;
width: 130px;
height: 130px;
position: absolute;
overflow: hidden;
right: 90px;
top: 190px;
z-index: 3;
}
.earth:before {
position: absolute;
content: '';
background: #1AA845;
width: 110px;
height: 80px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: -30px;
right: 70px;
box-shadow: 0px -5px 0px #189C34 inset;
}
.earth:after {
position: absolute;
content: '';
background: #1AA845;
width: 80px;
height: 50px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 90px;
right: 20px;
box-shadow: -6px 0px 0px #189C34 inset;
}
.snow {
position: absolute;
background: #FFF;
width: 50px;
height: 50px;
top: 62px;
right: 110px;
box-shadow: -6px 0px 0px #F5F5F5 inset;
z-index: 4;
}
.snow:after {
position: absolute;
background: #FFF;
content: '';
width: 50px;
height: 60px;
top: -24px;
right: -144px;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 1px -3px 0px #E6E6E6 inset;
}
.eyes_earth {
width: 14px;
height: 20px;
position: absolute;
display: block;
background: #181818;
top: 26px;
right: 37px;
animation: eyes_earth 2s infinite;
-webkit-animation: eyes_earth 2s infinite;
-moz-animation: eyes_earth 2s infinite;
-o-animation: eyes_earth 2s infinite;
}
.eyes_earth:after {
content: '';
width: 12px;
height: 15px;
position: absolute;
display: block;
background: #181818;
top: -2px;
right: -10px;
border-radius: 50%;
-webkit-border-radius: 50%;
animation: eyes_earthafter 2s infinite;
-webkit-animation: eyes_earthafter 2s infinite;
-o-animation: eyes_earthafter 2s infinite;
-moz-animation: eyes_earthafter 2s infinite;
}
@-webkit-keyframes eyes_earthafter {
0% {
height: 15px;
}
5% {
height: 0px;
}
10% {
height: 15px;
}
100% {
height: 15px;
}
}
@-moz-keyframes eyes_earthafter {
0% {
height: 15px;
}
5% {
height: 0px;
}
10% {
height: 15px;
}
100% {
height: 15px;
}
}
@-o-keyframes eyes_earthafter {
0% {
height: 15px;
}
5% {
height: 0px;
}
10% {
height: 15px;
}
100% {
height: 15px;
}
}
@keyframes eyes_earthafter {
0% {
height: 15px;
}
5% {
height: 0px;
}
10% {
height: 15px;
}
100% {
height: 15px;
}
}
@-webkit-keyframes eyes_earth {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-moz-keyframes eyes_earth {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-o-keyframes eyes_earth {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@keyframes eyes_earth {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
.green {
background: #55a9b3;
width: 120px;
height: 120px;
position: absolute;
overflow: hidden;
left: 330px;
top: 220px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
animation: green_planet 18s linear infinite;
-webkit-animation: green_planet 18s linear infinite;
-moz-animation: green_planet 18s linear infinite;
-o-animation: green_planet 18s linear infinite;
}
@keyframes green_planet {
0% {
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
50% {
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
51% {
transform: scaleX(1);
filter: none;
-ms-filter: "none";
}
100% {
transform: scaleX(1);
filter: none;
-ms-filter: "none";
}
}
@-webkit-keyframes green_planet {
0% {
-webkit-transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
50% {
-webkit-transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
51% {
-webkit-transform: scaleX(1);
filter: none;
-ms-filter: "none";
}
100% {
-webkit-transform: scaleX(1);
filter: none;
-ms-filter: "none";
}
}
@-moz-keyframes green_planet {
0% {
-moz-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
50% {
-moz-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
51% {
-moz-transform: scaleX(1);
transform: scaleX(1);
filter: none;
-ms-filter: "none";
}
100% {
-moz-transform: scaleX(1);
transform: scaleX(1);
filter: none;
-ms-filter: "none";
}
}
@keyframes green_planet {
0% {
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
50% {
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
51% {
transform: scaleX(1);
filter: none;
-ms-filter: "none";
}
100% {
transform: scaleX(1);
filter: none;
-ms-filter: "none";
}
}
.green:before {
position: absolute;
content: '';
background: #2b838e;
width: 20px;
height: 30px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 100px;
right: 30px;
box-shadow: 4px -3px 0px #1e6d78 inset;
}
.green:after {
position: absolute;
content: '';
background: #2b838e;
width: 30px;
height: 30px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 60px;
right: 60px;
box-shadow: 5px -2px 0px #1e6d78 inset;
}
.circles_green {
background: #2b838e;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: -4px;
right: -10px;
position: absolute;
display: block;
box-shadow: 4px -4px 0px #1e6d78 inset;
}
.circles_green:before {
content: '';
background: #2b838e;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: -4px;
right: 95px;
position: absolute;
box-shadow: -2px -4px 0px #1e6d78 inset;
}
.eyes_green {
width: 14px;
height: 20px;
position: absolute;
display: block;
background: #181818;
top: 30px;
right: 40px;
animation: eyes_green 2s infinite;
-webkit-animation: eyes_green 2s infinite;
-moz-animation: eyes_green 2s infinite;
-o-animation: eyes_green 2s infinite;
}
.eyes_green:after {
content: '';
width: 12px;
height: 15px;
position: absolute;
display: block;
background: #181818;
top: 0px;
right: -11px;
border-radius: 50%;
-webkit-border-radius: 50%;
animation: eyes_greenafter 2s infinite;
-webkit-animation: eyes_greenafter 2s infinite;
-moz-animation: eyes_greenafter 2s infinite;
-o-animation: eyes_greenafter 2s infinite;
}
@-webkit-keyframes eyes_greenafter {
0% {
height: 15px;
}
5% {
height: 0px;
}
10% {
height: 15px;
}
100% {
height: 15px;
}
}
@-moz-keyframes eyes_greenafter {
0% {
height: 15px;
}
5% {
height: 0px;
}
10% {
height: 15px;
}
100% {
height: 15px;
}
}
@-o-keyframes eyes_greenafter {
0% {
height: 15px;
}
5% {
height: 0px;
}
10% {
height: 15px;
}
100% {
height: 15px;
}
}
@keyframes eyes_greenafter {
0% {
height: 15px;
}
5% {
height: 0px;
}
10% {
height: 15px;
}
100% {
height: 15px;
}
}
@-webkit-keyframes eyes_green {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-moz-keyframes eyes_green {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-o-keyframes eyes_green {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@keyframes eyes_green {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
.eyes_red {
width: 20px;
height: 30px;
position: absolute;
display: block;
background: #181818;
top: 60px;
right: 60px;
animation: eyes_red 2s infinite;
-webkit-animation: eyes_red 2s infinite;
-moz-animation: eyes_red 2s infinite;
-o-animation: eyes_red 2s infinite;
}
.eyes_red:after {
content: '';
width: 14px;
height: 20px;
position: absolute;
display: block;
background: #181818;
top: 8px;
right: -13px;
border-radius: 50%;
-webkit-border-radius: 50%;
animation: eyes_redafter 2s infinite;
-webkit-animation: eyes_redafter 2s infinite;
-moz-animation: eyes_redafter 2s infinite;
-o-animation: eyes_redafter 2s infinite;
}
@keyframes eyes_redafter {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-webkit-keyframes eyes_redafter {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-moz-keyframes eyes_redafter {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-o-keyframes eyes_redafter {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-webkit-keyframes eyes_red {
0% {
height: 30px;
}
5% {
height: 0px;
}
10% {
height: 30px;
}
100% {
height: 30px;
}
}
@-moz-keyframes eyes_red {
0% {
height: 30px;
}
5% {
height: 0px;
}
10% {
height: 30px;
}
100% {
height: 30px;
}
}
@-o-keyframes eyes_red {
0% {
height: 30px;
}
5% {
height: 0px;
}
10% {
height: 30px;
}
100% {
height: 30px;
}
}
@keyframes eyes_red {
0% {
height: 30px;
}
5% {
height: 0px;
}
10% {
height: 30px;
}
100% {
height: 30px;
}
}
.yellow {
background: #efc849;
width: 180px;
height: 180px;
position: absolute;
overflow: hidden;
left: 520px;
top: 60px;
}
.yellow:before {
position: absolute;
content: '';
background: #E8A344;
width: 39px;
height: 30px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 127px;
right: 80px;
box-shadow: 3px -1px 0px #E18F33 inset;
}
.yellow:after {
position: absolute;
content: '';
background: #E8A344;
width: 50px;
height: 38px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 70px;
right: 28px;
box-shadow: 5px 1px 0px #E18F33 inset;
}
.circles_yellow {
background: #E8A344;
width: 60px;
height: 33px;
top: 9px;
position: absolute;
right: 61px;
box-shadow: 5px 0px 0px #E18F33 inset;
}
.eyes_yellow {
width: 20px;
height: 30px;
position: absolute;
display: block;
background: #181818;
top: 60px;
right: 130px;
animation: eyes_yellow 2s infinite;
-webkit-animation: eyes_yellow 2s infinite;
-moz-animation: eyes_yellow 2s infinite;
-o-animation: eyes_yellow 2s infinite;
}
.eyes_yellow:after {
content: '';
width: 14px;
height: 20px;
position: absolute;
display: block;
background: #181818;
top: 8px;
right: 18px;
border-radius: 50%;
-webkit-border-radius: 50%;
animation: eyes_yellowafter 2s infinite;
-webkit-animation: eyes_yellowafter 2s infinite;
-moz-animation: eyes_yellowafter 2s infinite;
-o-animation: eyes_yellowafter 2s infinite;
}
@keyframes eyes_yellowafter {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-webkit-keyframes eyes_yellowafter {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-moz-keyframes eyes_yellowafter {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-o-keyframes eyes_yellowafter {
0% {
height: 20px;
}
5% {
height: 0px;
}
10% {
height: 20px;
}
100% {
height: 20px;
}
}
@-webkit-keyframes eyes_yellow {
0% {
height: 30px;
}
5% {
height: 0px;
}
10% {
height: 30px;
}
100% {
height: 30px;
}
}
@-moz-keyframes eyes_yellow {
0% {
height: 30px;
}
5% {
height: 0px;
}
10% {
height: 30px;
}
100% {
height: 30px;
}
}
@-o-keyframes eyes_yellow {
0% {
height: 30px;
}
5% {
height: 0px;
}
10% {
height: 30px;
}
100% {
height: 30px;
}
}
@keyframes eyes_yellow {
0% {
height: 30px;
}
5% {
height: 0px;
}
10% {
height: 30px;
}
100% {
height: 30px;
}
}
.moon {
background: #e8e8e8;
width: 75px;
height: 75px;
position: absolute;
overflow: hidden;
right: 0px;
top: 120px;
z-index: 3;
}
.moon:before {
position: absolute;
content: '';
background: #E2E2E2;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: -20px;
right: 49px;
box-shadow: 0px -5px 0px #C8C8C8 inset;
}
.moon:after {
position: absolute;
content: '';
background: #e2e2e2;
width: 80px;
height: 50px;
border-radius: 50%;
-webkit-border-radius: 50%;
top: 90px;
right: 20px;
box-shadow: -6px 0px 0px #c8c8c8 inset;
}
.circles_moon {
position: absolute;
background: #CECECE;
width: 15px;
height: 19px;
top: 46px;
right: 24px;
box-shadow: 2px -1px 0px #B1B1B1 inset;
z-index: 4;
}
.circles_moon:after {
position: absolute;
background: #E2E2E2;
content: '';
width: 50px;
height: 40px;
top: -48px;
right: -52px;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 1px -3px 0px #C8C8C8 inset;
}
.eyes_moon {
width: 9px;
height: 10px;
position: absolute;
display: block;
background: #181818;
top: 34px;
right: 51px;
animation: eyes_moon 2s infinite;
-webkit-animation: eyes_moon 2s infinite;
-moz-animation: eyes_moon 2s infinite;
-o-animation: eyes_moon 2s infinite;
}
.eyes_moon:after {
content: '';
width: 10px;
height: 13px;
position: absolute;
display: block;
background: #181818;
top: -4px;
right: -9px;
border-radius: 50%;
-webkit-border-radius: 50%;
animation: eyes_moonafter 2s infinite;
-webkit-animation: eyes_moonafter 2s infinite;
-moz-animation: eyes_moonafter 2s infinite;
-o-animation: eyes_moonafter 2s infinite;
}
@-webkit-keyframes eyes_moonafter {
0% {
height: 13px;
}
5% {
height: 0px;
}
10% {
height: 13px;
}
100% {
height: 13px;
}
}
@-moz-keyframes eyes_moonafter {
0% {
height: 13px;
}
5% {
height: 0px;
}
10% {
height: 13px;
}
100% {
height: 13px;
}
}
@-o-keyframes eyes_moonafter {
0% {
height: 13px;
}
5% {
height: 0px;
}
10% {
height: 13px;
}
100% {
height: 13px;
}
}
@keyframes eyes_moonafter {
0% {
height: 13px;
}
5% {
height: 0px;
}
10% {
height: 13px;
}
100% {
height: 13px;
}
}
@-webkit-keyframes eyes_moon {
0% {
height: 10px;
}
5% {
height: 0px;
}
10% {
height: 10px;
}
100% {
height: 10px;
}
}
@-moz-keyframes eyes_moon {
0% {
height: 10px;
}
5% {
height: 0px;
}
10% {
height: 10px;
}
100% {
height: 10px;
}
}
@-o-keyframes eyes_moon {
0% {
height: 10px;
}
5% {
height: 0px;
}
10% {
height: 10px;
}
100% {
height: 10px;
}
}
@keyframes eyes_moon {
0% {
height: 10px;
}
5% {
height: 0px;
}
10% {
height: 10px;
}
100% {
height: 10px;
}
}
@media screen and (max-width: 420px) {
.container {
width: 400px !important
}
.planets {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
width: 100%;
left: -55px;
margin-top: -90px;
}
.earth,
.moon {
opacity: 0
}
.red {
left: -50px;
}
.green {
left: 250px;
}
.yellow {
left: 380px;
}
}
@media (min-width: 420px) and (max-width: 799px) {
.planets {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
width: 120%;
left: -55px;
margin-top: -90px;
}
.red {
left: -50px;
}
.green {
left: 250px;
}
.yellow {
left: 380px;
}
.earth {
right: 30px;
}
.moon {
right: -30px;
}
}
@media (min-width: 800px) and (max-width: 1024px) {
.planets {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-o-transform: scale(0.85);
transform: scale(0.85);
width: 120%;
left: -78px;
}
}