Membuat globe atau bola dunia dengan css

 Author : hadinug, 11 April, 2014, Komentar
css-globe

Animasi pada css juga dapat diterapkan pada posisi gambar yang menjadi latar belakang. Nah disini kita akan mencoba membuat sebuah animasi bola dunia yang melingkar dengan sebuah gambar peta yang menjadi latar belakang


Dengan menambahkan beberapa shading dan animasi, globe 3D dapat dibuat. Kode selengkapnya sebagai berikut:



<style>    
    .ball {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 50%;
        position: relative;
        -webkit-transform-style: preserve-3d;
        background: url('http://hadinug.net/try/ball/images/world-map-one-color.png') repeat-x;
        background-size: auto 100%;
        -webkit-animation: move-map 30s infinite linear;
        -moz-animation: move-map 30s infinite linear;
        -o-animation: move-map 30s infinite linear;
        -ms-animation: move-map 30s infinite linear;
        animation: move-map 30s infinite linear;
    }

    .ball:before {
        content: "";
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
        z-index: 2;
    }

    .ball:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-filter: blur(0);
        opacity: 0.3;
        background: -webkit-gradient(radial, 50% 80%, 0, 50% 80%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(66%, #055194), color-stop(100%, #062745));
        background: -webkit-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
        background: -moz-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
        background: -o-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
        background: radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
    }

    .ball .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
        background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0)));
        background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        background: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        background: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        background: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        -webkit-transform: rotateX(90deg) translateZ(-150px);
        -moz-transform: rotateX(90deg) translateZ(-150px);
        -ms-transform: rotateX(90deg) translateZ(-150px);
        -o-transform: rotateX(90deg) translateZ(-150px);
        transform: rotateX(90deg) translateZ(-150px);
        z-index: -1;
    }
    body {
        width: 300px;
        margin: 20px auto;
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(100, 100, 100, 0.2)), color-stop(40%, rgba(255, 255, 255, 0.5)), color-stop(100%, #ffffff));
        background: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -moz-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -o-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background-repeat: no-repeat;
    }

    .stage {
        width: 300px;
        height: 300px;
        display: inline-block;
        margin: 20px;
        -webkit-perspective: 1200px;
        -moz-perspective: 1200px;
        -ms-perspective: 1200px;
        -o-perspective: 1200px;
        perspective: 1200px;
        -webkit-perspective-origin: 50% 50%;
        -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
        -o-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
    }

    @-moz-keyframes move-map {
        0% {
        background-position: -849px 0; }

    100% {
        background-position: 0 0; } }

    @-webkit-keyframes move-map {
        0% {
        background-position: 0 0; }
    100% {
        background-position: -849px 0; }
    }


    @-o-keyframes move-map {
        0% {
        background-position: -849px 0; }

    100% {
        background-position: 0 0; } }

    @-ms-keyframes move-map {
        0% {
        background-position: -849px 0; }

    100% {
        background-position: 0 0; } }

    @keyframes move-map {
        0% {
        background-position: -849px 0; }

    100% {
        background-position: 0 0; } }
    </style>
    <section class="stage">
    <figure class="ball">
        <span class="shadow"></span> 
    </figure>
</section>

Lihat demonya disini. Semoga bermanfaat, dan lihat juga tutorial yang terkait 

 
Bagikan halaman ke sosial media
 
Tags :   css    css3       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda