Trik Membuat Animasi Cortana Windows 10 CSS3
Trik Membuat Animasi Cortana Windows 10 CSS3~ pada tutorial kali ini saya membahas yaitu trik membuat animasi cortana. Inspirasi membuat animasi ini saya dapatkan dari windows 10 yang terlihat sangat menakjubkan, Cortana merupakan sebuah system bantuan dari windows 10 yang bisa berbicara layaknya seorang manusia. Ok, dalam pembuatan animasi ini kita hanya membutuhkan bantuan dari sintak CSS3 yaitu animation dan @keyframes, disini saya memberikan efek zoomin dan zoomout dalam pembuatan animasi cortana ini. Nah, mari teman-teman perhatikan langkah-langkah pembuatannya dibawah ini :
1. Langkah Pertama, buat dahulu sintak html seperti berikut atau teman bisa copas langsung :
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animasi Cortana Windows 10</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cortana"> <span></span> </div> <br> <h1 class="caption">Hi! How can i help ?</h1> </body> </html>
2. Langkah yang kedua, silahkan buat sintak css-nya dan beri nama style.css. script-nya seperti berikut :
*{
margin: 0 auto;
font-family: Helvetica;
}
body {
background-color: black;
}
.cortana span {
margin-top: 100px;
position: relative;
height: 100px;
width: 100px;
display: block;
}
.cortana span:after {
position: absolute;
content:'';
height: 100px;
width: 100px;
display: block;
background-color:black;
border: 8px solid rgba( 8, 138, 251, 0.802 );
border-radius:50%;
animation: zoomin 6s ease-in-out infinite;
}
.cortana span:before {
position: absolute;
content:'';
top: -22px;
left: -22px;
height: 100px;
width: 100px;
display: block;
background-color: rgba( 0, 112, 224, 0.573 );
border: 30px solid rgba( 0, 68, 127, 0.445 );
border-radius:50%;
animation: zoomout 6s ease-in-out infinite;
}
/*animation zoomin*/
@keyframes zoomin{
0%,100%{transform: scale(1);}
50%{transform: scale(1.2);}
}
/*animation zoomout*/
@keyframes zoomout{
0%,100%{transform: scale(1.2);}
50%{transform: scale(1);}
}
/*text caption cortana*/
.caption {
font-size: 40px;
margin-top: 100px;
color : #0a84ff;
text-align: center;
}
3. Yang terakhir, silahkan simpan dan lihat hasilnya. Jika sudah tampil maka tampilannya seperti dibawah ini :
Bagi teman-teman yang ingin download source kodenya silahkan klik tombol download dibawah ini :
Untuk mempermudah proses pembelajaran saya menyertakan video untuk kalian download atau tonton langsung di youtube saya berikut :
Sekian dulu ya teman,Semoga tutorial dari saya bermanfaat untuk kalian semua dan saya ucapkan terima kasih .
Comments
Post a Comment