html5 太空,HTML5 太空胶囊

CSS

语言：

CSSSCSS

确定

body {

background: #342e3d;

}

.container {

width: 500px;

height: 500px;

display: block;

margin: 100px auto;

}

.capsule-small {

width: 500px;

height: 200px;

border: 3px solid #595561;

background: rgba(82, 75, 90, .5);

border-radius: 100px;

display: block;

box-shadow: 30px 10px 0 0 rgba(0, 0, 0, 0.3), 30px 10px 0 0 rgba(82, 75, 90, 0.3) inset;

}

.circle {

background: #e3e3e3;

position: absolute;

margin: 3px;

}

.moon {

width: 20px;

height: 20px;

background: #f2ede3;

border-radius: 100%;

position: absolute;

box-shadow: -2px -2px 0 0 #d1bda7 inset;

}

.moon:after {

content: '';

width: 7px;

height: 7px;

margin: 4px;

background: #e9d6c0;

border-radius: 100%;

position: absolute;

}

.moon:before {

content: '';

width: 2px;

height: 2px;

margin: 10px;

background: #e9d6c0;

border-radius: 100%;

position: absolute;

}

.earth {

width: 30px;

height: 30px;

background: #2257c9;

border-radius: 100%;

box-shadow: -3px -3px 0 0 rgba(0, 0, 0, 0.3) inset, 2px 1px 0 0 #a8d806 inset;

position: absolute;

}

.earth:before {

content: '';

width: 6px;

height: 6px;

margin: 5px;

background: #a8d806;

position: absolute;

}

.earth:after {

content: '';

width: 4px;

height: 4px;

margin: 6px 12px;

background: #a8d806;

border-radius: 100%;

position: absolute;

}

.sun {

width: 30px;

height: 30px;

background: #fcea2a;

border-radius: 100%;

margin: 100px;

box-shadow: 0px 0px 5px 10px #f4a40e;

position: absolute;

}

.mars {

width: 25px;

height: 25px;

background: #d69d63;

border-radius: 100%;

margin: 100px;

box-shadow: -3px -3px 0 0 rgba(0, 0, 0, 0.3) inset;

position: absolute;

}

.mars:after {

content: '';

width: 7px;

height: 7px;

margin: 12px;

background: #917652;

border-radius: 100%;

position: absolute;

}

.mars:before {

content: '';

width: 4px;

height: 4px;

margin: 10px;

background: #917652;

border-radius: 100%;

position: absolute;

}

.venus {

width: 30px;

height: 30px;

background: #f36b32;

border-radius: 100%;

margin: 100px;

box-shadow: -3px -3px 0 0 rgba(0, 0, 0, 0.3) inset;

position: absolute;

}

.venus:after {

content: '';

width: 7px;

height: 7px;

margin: 10px;

background: #6b260b;

border-radius: 100%;

position: absolute;

}

.venus:before {

content: '';

width: 4px;

height: 4px;

margin: 15px 20px;

background: #6b260b;

border-radius: 100%;

position: absolute;

}