本文标签： 前端
大家已经见惯了用CSS3画的图标、LOGO、头像，这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫《轻音少女》女主角秋山澪的动态头像。CSS3的强大再次霸气测漏！
请点击Demo查看效果，示例支持Chrome、Firefox、Opera、Safari等全系列的现代浏览器。
示例中用到的主要CSS3特性如下：
border-radius：绘制边框圆角。
transform：主要是旋转（rotate）和偏斜（skew），用于绘制各种形状。
animation：动画效果的实现，例如头发的飘动、眼睛的闪动。
只要掌握了这几个特性，你也能画出同样奇妙的CSS3动画，赶快试试吧！
相关链接：《用纯CSS3实现QQ Logo》
声明: 本文由( 张飞不张，文采横飞 )原创编译，转载请保留链接: 用纯CSS3绘制萌系漫画人物动态头像
Linux系统与内核学习群：194051772
WP建站技术学习交流群：194062106
牛。。。
2012-01-09 19:05这个亮了。。。。。。学习中
2012-01-12 13:44值得学习啊……
2012-03-18 14:38在chrome里div会有绿色边线问题。
我还在另一个地方发现了同样的问题，在div里画一个圆，如果让它旋转也会有绿色边线。
[code=html]
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
@-webkit-keyframes tyreAnimation
{
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(1800deg); }
}
.tire
{
position:absolute;
bottom:0;
border-radius:60px; /*圆半径*/
height:120px; /* 2*radius=height */
width:120px; /* 2*radius=width */
background:#0099FF; /*填充色*/
border:1px solid #3300FF;
-webkit-animation-name:tyreAnimation;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
</style>
</head>
<body>
<div class = "tire"></div>
</body>
</html>
[/code]
2012-03-19 16:19[reply]supegg[/reply]
2012-03-19 16:20那个border是圆的边线，大家修改一下厚度就可以看出来。除此还有div的边线，囧。