0 Animasi windows 8 dengan CCS :

Tahun ini merupakan tahun dimana The Next Generation Windows keluar yaitu Windows 8.Pasti kalian tidak sabar dan ingin menggunakan sistem operasi baru itu,saya pun demikian.Tapi DVD Windows 8 yang Original masih berada di Ibukota,dan belum masuk ke pasaran kota lainnya,termasuk di sini.


Dengan Lambang yang Baru,memang sangat bagus dan menarik.Windows 8 sudah seperti jendela asli,tapi agak miring ke kiri.kali ini saya akan memberikan tips membuat lambang windows 8 dengan efek animasi.

Screenshot

DEMO

untuk hasilnya dapat di lihat di sini klik Windows 8 

CODE

CSS


<style>
.jendela {
 width:200px;
 height:150px;
 background:#00adef;
 position:relative;
 margin-top:40px;
 padding-top:0px;
 -webkit-transform: perspective(400px) rotateY(-25deg);
 -moz-transform: perspective(400px) rotateY(-25deg);
 -o-transform: perspective(400px) rotateY(-25deg);
 -ms-transform: perspective(400px) rotateY(-25deg);
 -webkit-animation: jendela_animation 3s infinite;
 -moz-animation: jendela_animation 3s infinite;
 -o-animation: jendela_animation 3s infinite;
 -ms-animation: jendela_animation 3s infinite;
 }

.jendela::after, .jendela::before {

 content:'';
 background:white;
 height:100%;
 width:10px;
 top:0;
 left:50%;
 -margin-left:-5px;
 position:absolute;
 }

.jendela::before {
 left:0;
 top:50%;
 margin-top:-5px;
 height:10px;
 width:100%;
 position:absolute;
 }

@-webkit-keyframes jendela_animation {
    0%, 100% {
    -webkit-transform: perspective(400px) rotateY(-25deg);
    }
    50% {
    -webkit-transform: perspective(400px) rotateY(-50deg);
    }
    }

@-moz-keyframes jendela_animation {
    0%, 100% {
    -moz-transform: perspective(400px) rotateY(-25deg);
    }
    50% {
    -moz-transform: perspective(400px) rotateY(-50deg);
    }
    }

@-o-keyframes jendela_animation {
    0%, 100% {
    -o-transform: perspective(400px) rotateY(-25deg);
    }
    50% {
    -o-transform: perspective(400px) rotateY(-50deg);
    }
    }

@-ms-keyframes jendela_animation {
    0%, 100% {
    -ms-transform: perspective(400px) rotateY(-25deg);
    }
    50% {
    -ms-transform: perspective(400px) rotateY(-50deg);
    }
    }

.teks {
 font-family:arial;
 line-height:150px;
 font-size:140px;
 color:#00adef;
 margin-top:-150px;
 padding-left:240px;
 </style>


 HTML

<div class="jendela"></div>
<div class="teks">WINDOWS 8</div>

Jika ingin melihat hasilnya bisa test di sini www.htmledit.squarefree.com

Sekian dari Saya
Semoga Bermanfaat
Wassalamu'alaikum wr wb


sumber :http://trisnanugrohosite.blogspot.com/2012/11/animasi-windows-8.html