Simple Coding Pemograman

Simple dan mudah belajar coding pemograman

Home » CSS » Membuat Animasi Kompas Dengan CSS

Membuat Animasi Kompas Dengan CSS

Membuat Animasi Kompas Dengan CSS - Sahabat Coding membuat coding simple sangat membantu dalam duania pemograman ,dan kali ini kita akan membahas mengenai rahasia simple Membuat Animasi Kompas Dengan CSS, buktikan saja sesuai tutorial Membuat Animasi Kompas Dengan CSS, dan pastikan temukan pengalaman tersendiri dalam dunia pemograman

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


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



Dan sekian tutorial Membuat Animasi Kompas Dengan CSS kali ini

Salam sahabat coding Membuat Animasi Kompas Dengan CSS, semoga dapat membantu untuk mencari solusi permasalahan seputar coding anda,teruslah ikuti simple coding diportal ini.
Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Membuat Animasi Kompas Dengan CSS

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)