本文标签: 前端
大家已经见惯了用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的边线,囧。