Membuat Animasi Kompas Dengan CSS

05:59:00 24 Comments
Membuat Animasi Kompas Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 

Selamat pagi semuanya ? ^_^
happy weekend :D
semoga sehat semua yah, dan masih semangat untuk belajar coding nya heheh  ^_^

pada Tutorial sebelumnya saya sudah Membuat Animasi Dengan CSS yaitu Animasi Dozing Bird
yang bisa anda lihat tutorial dan demonya DISINI

Nah pada  kesempatan kali ini saya akan memberikan tutorial mengenai pembuatan animasi lagi yaitu Cara Membuat Animasi Kompas Dengan CSS
pada kali ini animasi yang saya buat adalah animasi kompas yang sedang menunjukkan arah.
Animasi ini hanya menggunakan css, oh iya di karenakan saya belum mampu membuat animasi dengan css Jadi animasi ini bukan buatan saya, melainkan programmer  yang bernama Alex Bergin
karya dia sengaja saya share karena saya menyukai karyanya :D biar gak penasaran,
Langsung saja kita praktekan, silahkan ikuti langkah-langkah di bawah ini dengan benar.

1. Membuat File HTML
file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Animasi Kompas Dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="letter">C</div>
<div id="description">is for Compass</div>

<div id="animation">
    <div class="knob"></div><div class="ring"></div>
    <div class="body">
        <div class="dial"></div>
        <div class="arrow">
            <div class="spinner">
                <div class="red"></div>
            </div>
            <div class="red pointer"></div>
            <div class="white pointer"></div>
        </div>
        <div class="face">
            <div class="circle">
                <div class="outer"></div>
            </div>
            
            <div class="star">
                <div class="seg">
                    <div></div>
                    <div></div>
                </div>
                <div class="seg">
                    <div></div>
                    <div></div>
                </div>
                <div class="seg">
                    <div></div>
                    <div></div>
                </div>
                <div class="seg">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="north text">n</div>
            <div class="north pointer"></div>
            <div class="south text">s</div>
            <div class="south pointer"></div>
            <div class="east text">e</div>
            <div class="east pointer"></div>
            <div class="west text">w</div>
            <div class="west pointer"></div>
        </div>
        <div class="glass">
            <div></div>
        </div>
    </div>
</div>
</body>
</html>

Sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa teks yang gk jelas,
agar terbentuk animasi kompasnya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
Nah ini dia file inti pada tutorial kali ini, kenapa di sebut file inti, ya karena tanpa file css kita tidak akan bisa membuat animasi tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

* {
    padding: 0;
    margin: 0;
}

html , body {
    width: 100%;
    height: 100%:
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0%;
}

html {
    background-color: rgba(250,255,248,1);    
}

#letter {
    font-size: 120px;
    font-family: Helvetica;
    font-weight: Bold;
    color: rgba(18,22,26,0.7);
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: middle;
    line-height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    z-index: -1;
}

#description {
    position: fixed;
    bottom: 10px;
    width: 100%;
    z-index: 100;
    font-family: Helvetica;
    font-weight: 200;
    color: rgba(18,22,26,0.7);
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
}

#animation {
    -webkit-transform: scale( 0.65 , 0.65 );
    -moz-transform: scale( 0.65 , 0.65 );
    -ms-transform: scale( 0.65 , 0.65 );
    -o-transform: scale( 0.65 , 0.65 );
    transform: scale( 0.65 , 0.65 );
}

.body {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    border: 10px solid rgba(235,236,240,1);
    background-color: rgba(215,216,220,0.7);
    border-radius: 1000px;
    margin-top: -210px;
    margin-left: -210px;
    overflow: hidden;
}

.face .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    border-radius: 200px;
    margin-top: -92px;
    margin-left: -92px;
    border: 1px solid rgba(21,24,30,0.1);
}

.face .circle .outer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    margin-top: -151px;
    margin-left: -151px;
    border: 1px solid rgba(21,24,30,0.1);
}

.face .star .seg div:nth-of-type(1) {
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
    border-bottom: 15px solid rgba(21,24,30,0.15);
    position: absolute;
    margin-left: -120px;
    margin-top: -15px;
    top: 50%;
    left: 50%;
}

.face .star .seg div:nth-of-type(2) {
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
    border-top: 15px solid rgba(255,255,255,0.25);
    position: absolute;
    margin-left: -120px;
    margin-top: 0px;
    top: 50%;
    left: 50%;
}

.face .star .seg:nth-of-type(2){
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    margin-top: 50%;
}

.face .star .seg:nth-of-type(3){
    -webkit-transform: rotate(45deg) scale( 1.25 , 1.25 );
    -moz-transform: rotate(45deg) scale( 1.25 , 1.25 );
    -ms-transform: rotate(45deg) scale( 1.25 , 1.25 );
    -o-transform: rotate(45deg) scale( 1.25 , 1.25 );
    transform: rotate(45deg) scale( 1.25 , 1.25 );
    margin-top: 50%;
}

.face .star .seg:nth-of-type(4){
    -webkit-transform: rotate(-45deg) scale( 1.25 , 1.25 );
    -moz-transform: rotate(-45deg) scale( 1.25 , 1.25 );
    -ms-transform: rotate(-45deg) scale( 1.25 , 1.25 );
    -o-transform: rotate(-45deg) scale( 1.25 , 1.25 );
    transform: rotate(-45deg) scale( 1.25 , 1.25 );
    margin-top: 50%;
}

.face {
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.face .pointer {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 20px solid rgba(21,24,30,0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -180px;
    -webkit-transform-origin: center 180px;
    transform-origin: center 180px;
}

.face .text {
    width: 100%;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 0%;
    margin-top: -150px;
    font-family: Helvetica;
    font-size: 18px;
    font-weight: 200;
    text-transform: uppercase;
    text-align: center;
    color: rgba(21,24,30,0.5);
    -webkit-transform-origin: center 150px;
    transform-origin: center 150px;
}

.face .north {
    -webkit-transform: rotate( 0deg );
    -moz-transform: rotate( 0deg );
    -ms-transform: rotate( 0deg );
    -o-transform: rotate( 0deg );
}

.face .south {
    -webkit-transform: rotate( 180deg );
    -moz-transform: rotate( 180deg );
    -ms-transform: rotate( 180deg );
    -o-transform: rotate( 180deg );
}

.face .east {
    -webkit-transform: rotate( 90deg );
    -moz-transform: rotate( 90deg );
    -ms-transform: rotate( 90deg );
    -o-transform: rotate( 90deg );
}

.face .west {
    -webkit-transform: rotate( -90deg );
    -moz-transform: rotate( -90deg );
    -ms-transform: rotate( -90deg );
    -o-transform: rotate( -90deg );
}

.knob {
    width: 30px;
    height: 30px;
    background-color: rgba(215,216,220,1);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -225px;
    z-index: -1;
    border-radius: 30px;
}

.ring {
    width: 60px;
    height: 60px;
    position: absolute;
    margin-left: -36px;
    margin-top: -285px;
    border-radius: 60px;
    border: 6px solid rgba(235,236,240,1);
    top: 50%;
    left: 50%;
    z-index: -2;
}

.dial {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 150px;
    background-color: rgba(235,236,240,1);
    z-index: 10;
}

.arrow {
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    animation: compass 6.5s ease-in-out 0s infinite alternate none;
 -webkit-animation: compass 6.5s ease-in-out 0s infinite alternate none;
}

.arrow .pointer {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 200px solid transparent;
    position: absolute;
    margin-left: 150px;
}

.arrow .red.pointer {
    border-bottom-color: rgba(255,74,83,1);
    -webkit-transform: scale( 0.2 , 0.8 ) translate( 0% , 10% );
    -moz-transform: scale( 0.2 , 0.8 ) translate( 0% , 10% );
    -ms-transform: scale( 0.2 , 0.8 ) translate( 0% , 10% );
    -o-transform: scale( 0.2 , 0.8 ) translate( 0% , 10% );
    transform: scale( 0.2 , 0.8 ) translate( 0% , 10% );
}

.arrow .white.pointer {
    border-bottom-color: rgba(255,255,255,1);
    -webkit-transform: scale( 0.2 , 0.8 ) rotate(180deg) translate( 0% , -120% );
    -moz-transform: scale( 0.2 , 0.8 ) rotate(180deg) translate( 0% , -120% );
    -ms-transform: scale( 0.2 , 0.8 ) rotate(180deg) translate( 0% , -120% );
    -o-transform: scale( 0.2 , 0.8 ) rotate(180deg) translate( 0% , -120% );
    transform: scale( 0.2 , 0.8 ) rotate(180deg) translate( 0% , -120% );
}

.spinner {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border-radius: 160px;
    background-color: rgba(255,255,255,1);
    overflow: hidden;
}

.spinner .red {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 50%;
    background-color: rgba(255,74,83,1);
}

.glass {
    position: absolute;
    top: -10%;
    left: 20%;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 1000;
}

.glass div {
    width: 800px;
    background-color: rgba(230,252,255,0.15);
    border-top-left-radius: 800px;
    height: 600px;
    -webkit-transform: skew(-40deg) scale( 1 , 1 );
    transform: skew(-40deg) scale( 1 , 1 );
}

@keyframes compass {
 63% { -webkit-transform: rotate( -3deg); -moz-transform: rotate( -3deg); -ms-transform: rotate( -3deg); -o-transform: rotate( -3deg); transform: rotate( -3deg);} 
 28% { -webkit-transform: rotate( 4deg); -moz-transform: rotate( 4deg); -ms-transform: rotate( 4deg); -o-transform: rotate( 4deg); transform: rotate( 4deg);} 
 88% { -webkit-transform: rotate( 3deg); -moz-transform: rotate( 3deg); -ms-transform: rotate( 3deg); -o-transform: rotate( 3deg); transform: rotate( 3deg);} 
 14% { -webkit-transform: rotate( -8deg); -moz-transform: rotate( -8deg); -ms-transform: rotate( -8deg); -o-transform: rotate( -8deg); transform: rotate( -8deg);} 
 75% { -webkit-transform: rotate( 6deg); -moz-transform: rotate( 6deg); -ms-transform: rotate( 6deg); -o-transform: rotate( 6deg); transform: rotate( 6deg);} 
 100% { -webkit-transform: rotate( 12deg); -moz-transform: rotate( 12deg); -ms-transform: rotate( 12deg); -o-transform: rotate( 12deg); transform: rotate( 12deg);} 
 57% { -webkit-transform: rotate( 12deg); -moz-transform: rotate( 12deg); -ms-transform: rotate( 12deg); -o-transform: rotate( 12deg); transform: rotate( 12deg);} 
 50% { -webkit-transform: rotate( -60deg); -moz-transform: rotate( -60deg); -ms-transform: rotate( -60deg); -o-transform: rotate( -60deg); transform: rotate( -60deg);} 
 43% { -webkit-transform: rotate( 30deg); -moz-transform: rotate( 30deg); -ms-transform: rotate( 30deg); -o-transform: rotate( 30deg); transform: rotate( 30deg);} 
 35% { -webkit-transform: rotate( -15deg); -moz-transform: rotate( -15deg); -ms-transform: rotate( -15deg); -o-transform: rotate( -15deg); transform: rotate( -15deg);} 
 0% { -webkit-transform: rotate( 0deg); -moz-transform: rotate( 0deg); -ms-transform: rotate( 0deg); -o-transform: rotate( 0deg); transform: rotate( 0deg);} 
}

@-webkit-keyframes compass {
 63% { -webkit-transform: rotate( -3deg); -moz-transform: rotate( -3deg); -ms-transform: rotate( -3deg); -o-transform: rotate( -3deg); transform: rotate( -3deg);} 
 28% { -webkit-transform: rotate( 4deg); -moz-transform: rotate( 4deg); -ms-transform: rotate( 4deg); -o-transform: rotate( 4deg); transform: rotate( 4deg);} 
 88% { -webkit-transform: rotate( 3deg); -moz-transform: rotate( 3deg); -ms-transform: rotate( 3deg); -o-transform: rotate( 3deg); transform: rotate( 3deg);} 
 14% { -webkit-transform: rotate( -8deg); -moz-transform: rotate( -8deg); -ms-transform: rotate( -8deg); -o-transform: rotate( -8deg); transform: rotate( -8deg);} 
 75% { -webkit-transform: rotate( 6deg); -moz-transform: rotate( 6deg); -ms-transform: rotate( 6deg); -o-transform: rotate( 6deg); transform: rotate( 6deg);} 
 100% { -webkit-transform: rotate( 12deg); -moz-transform: rotate( 12deg); -ms-transform: rotate( 12deg); -o-transform: rotate( 12deg); transform: rotate( 12deg);} 
 57% { -webkit-transform: rotate( 12deg); -moz-transform: rotate( 12deg); -ms-transform: rotate( 12deg); -o-transform: rotate( 12deg); transform: rotate( 12deg);} 
 50% { -webkit-transform: rotate( -60deg); -moz-transform: rotate( -60deg); -ms-transform: rotate( -60deg); -o-transform: rotate( -60deg); transform: rotate( -60deg);} 
 43% { -webkit-transform: rotate( 30deg); -moz-transform: rotate( 30deg); -ms-transform: rotate( 30deg); -o-transform: rotate( 30deg); transform: rotate( 30deg);} 
 35% { -webkit-transform: rotate( -15deg); -moz-transform: rotate( -15deg); -ms-transform: rotate( -15deg); -o-transform: rotate( -15deg); transform: rotate( -15deg);} 
 0% { -webkit-transform: rotate( 0deg); -moz-transform: rotate( 0deg); -ms-transform: rotate( 0deg); -o-transform: rotate( 0deg); transform: rotate( 0deg);} 
}

silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
lihat apa yang terjadi di browsermu :D

Demikianlah Cara Membuat Animasi Kompas Dengan CSS, keren bukan ? :D
Jika anda ingin melihat hasilnya atau demonya Silahkan anda buka halaman demonyadi bawah ini

Demo
click to view

Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D


وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ


SHARE THIS
Unknown

Author:

Previous Post
Next Post
TIO NOTE
4 October 2015 at 06:12

Pertamax diamankan , ijin diterapkan buat tugas akhir ya gan :D

Reply
avatar
Unknown
4 October 2015 at 07:05

wah css ane ingin belajar dari awal gan ...iri ama orang pda bisa :D

Reply
avatar
Unknown
4 October 2015 at 10:12

unik nih bro di coba dlu

Reply
avatar
Anonymous
4 October 2015 at 10:13

wahh mantap gan

Reply
avatar
Anonymous
4 October 2015 at 12:48

makasih bro infonya jadi bisa buat animasi kompas dengan css

Reply
avatar
Unknown
4 October 2015 at 13:35

wah css ane ingin belajar dari awal gan ...iri ama orang pda bisa :D

Reply
avatar
rul
4 October 2015 at 14:49


keren gann, kalo tersesat tinggal buka blog aja wkwk :v

Reply
avatar
Muhammad Romadhoni
4 October 2015 at 15:40

masih sama kaya kemarin , geleng-geleng kepala, kok bisa buat yang gituan dengan script yang banyak

Reply
avatar
Reza Syahputra Rizal
4 October 2015 at 15:44

Keren Nih, Bisa tak cobain dulu :D

Reply
avatar
LangkahNet
4 October 2015 at 15:59

wah keren nih bisa buat kompas :-)
ijin nyoba yahh hehe

Reply
avatar
Fauzan
4 October 2015 at 16:30

mantap gan ,, ane coba boleh kan hehehe

Reply
avatar
Libraryrick
4 October 2015 at 20:30

asekk benerr dah ni caraa

Reply
avatar
Unknown
5 October 2015 at 05:08

tiap hari ada aja hal baru disini,nice post gan

Reply
avatar
Shemi Storm
5 October 2015 at 06:37

izin praktek thanks sudah berbagi

Reply
avatar
Unknown
5 October 2015 at 06:39

Saya kira pake JS, ternyata nggak. Nggak bikin lemot brati. Mantap mas

Reply
avatar
Pembuat Patung
5 October 2015 at 13:30

gara-gara blog coding pintar jadi nambah ilmu trus nie.Tg ijin nyoba

Reply
avatar
Unknown
25 November 2017 at 05:30

mas kalo kompas itu gerak berdasarkan data nilai bisa gak ya..misal nilai 60 nnti arah ke NE

Reply
avatar
Subscribe to: Post Comments (Atom)