CSS3卡通小鸟头像旋转动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3卡通小鸟头像旋转动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)