earth

by ian_smithz

HTML

<div class="earth">
</div>

CSS

.earth {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 3em auto;
    background: #888 url(https://lh5.googleusercontent.com/-kkxEx-SkRaY/VBLF4BV2lZI/AAAAAAAAKao/FnKsv7402_c/s0/earthmap.jpg) 0 0 repeat;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-size: 630px;
    animation: rotate 4s linear infinite;
    -webkit-animation: rotate 4s linear infinite;
    -moz-animation: rotate 4s linear infinite;
    -ms-animation: rotate 4s linear infinite;
    -o-animation: rotate 4s linear infinite;
    -webkit-transition: -webkit-transform 200ms linear;
    -webkit-transform-style: preserve-3d;
    -moz-transition: -moz-transform 200ms linear;
    -moz-transform-style: preserve-3d;
    transition: transform 200ms linear;
    transform-style: preserve-3d;
    box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
    -moz-box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
    -webkit-box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
    color: #000;
}


.earth:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
    -moz-box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
    -webkit-box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
    z-index: 2;
}



.earth:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.2;
    background: radial-gradient(circle at 100px 100px, #fff, #000);
}