kembali tentang cascading stylesheet, admin akan berbagi tentang efek Fade-in Fade-out ,setelah sebelumnya tentang cara membuat login popup dengan css3 .
efek ini cocok untuk efek login, tanpa harus menggunakan flash yang terlalu berat.
1. pertama, anda buat file basic html terlebih dahulu, simpan dengan nama index.html
2. buatlah stylenya yaitu cascading stylesheet 3, disini cssnya akan ada di head program index.html, jadi tidak diperlukan file baru, ini adalah codenya :
<style>
body, html {
text-align: center;
font-size: 90px;
font-family: Poiret One;
height: 100%;
background: -webkit-linear-gradient(315deg, #723362, #9d223c);
background: linear-gradient(135deg, #723362, #9d223c);
overflow: hidden;
color: white;
}
.raka {
position: relative;
top: -webkit-calc(50% - 60px);
top: calc(50% - 60px);
text-shadow: 0px 0px 3px white;
}
.raka:nth-child(1) {
-webkit-animation: fade 4s infinite 200ms;
animation: fade 4s infinite 200ms;
}
.raka:nth-child(2) {
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.raka:nth-child(3) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}
.raka:nth-child(4) {
-webkit-animation: fade 4s infinite 800ms;
animation: fade 4s infinite 800ms;
}
.raka:nth-child(5) {
-webkit-animation: fade 4s infinite 1000ms;
animation: fade 4s infinite 1000ms;
}
.raka:nth-child(6) {
-webkit-animation: fade 4s infinite 1200ms;
animation: fade 4s infinite 1200ms;
}
.raka:nth-child(7) {
-webkit-animation: fade 4s infinite 1400ms;
animation: fade 4s infinite 1400ms;
}
@-webkit-keyframes fade {
50% {
opacity: 0.02;
}
}
@keyframes fade {
50% {
opacity: 0.02;
}
}
</style>
3. setelah itu, untuk pemanggilan di bagian body, dari code code css di atas :
<span class='raka'>R</span>
<span class='raka'>A</span>
<span class='raka'>K</span>
<span class='raka'>A</span>
<span class='raka'></span>
<span class='raka'>A</span>
<span class='raka'>N</span>
4. simpan, dan jalankan di browser anda,(pastikan browser anda menunjang css3)
Salam Joskoder
Raka Adi Nugroho
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
