<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>CSS3卡通小鸟头像旋转动画特效 - 网页模板</title>
<style>
*{margin:0; padding:0; list-style:none;}
body{background:#27283b;}
.bird{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
cursor:pointer;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
}
.big{
position:absolute;
top:0;
left:0;
border-radius:50%;
border-color:transparent transparent #d72928 #db3e3d;
border-width:100px;
border-style:solid;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
.middle{
position:absolute;
top:10%;
left:10%;
border-radius:50%;
border-color:#f8d245 transparent #f2f2f2 #fff;
border-style:solid;
border-width:80px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
.small{
position:absolute;
top:30%;
left:30%;
border-radius:50%;
border-color:transparent #f7a703 transparent transparent;
border-style:solid;
border-width:40px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
.small:before{
content:"";
background:#000;
width:20px;
height:20px;
border-radius:50%;
position:absolute;
top:-10px;
right:20px;
}
.bird:hover .big{
transform:rotate(225deg);
-webkit-transform:rotate(225deg);
-moz-transform:rotate(225deg);
border-color:transparent transparent #1fe8b6 #16d7a7;
}
.bird:hover .middle{
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
border-color:transparent #f8d245 #fff #f2f2f2;
}
.bird:hover .small{
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
border-color:transparent #f7a703 transparent transparent;;
}
</style>
</head>
<body>
<div class="bird">
<div class="big"></div>
<div class="middle"></div>
<div class="small"></div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
