Cara buat animasi berputar pada shape bulat

Assalamu'alaikum wr wb
Kali ini saya akan share bagaimana caranya membuat animasi berputar di shape bulat.
Berikut ini syntaxnya.
____________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
    background: red;
    border: 5px solid green;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

div:hover {
     -webkit-animation: rotate 2s linear infinite;
     border: 5px dotted blue;
}

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(180deg);
    }
}

</style>

</head>

<body>

<div class="rotate">
</div>

</body>
</html>

____________________________________________________________
Semoga bermanfaat.
http://pangeran-it.blogspot.com/
Cara buat animasi berputar pada shape bulat Cara buat animasi berputar pada shape bulat Reviewed by Syawaluddin Amin, S.Kom on Februari 18, 2014 Rating: 5

Tidak ada komentar:

Diberdayakan oleh Blogger.