HardBirch

用纯CSS3绘制萌系漫画人物动态头像

时间:12-01-05 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:5 点击: 2,725 次

         大家已经见惯了用CSS3画的图标、LOGO、头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫《轻音少女》女主角秋山澪的动态头像。CSS3的强大再次霸气测漏!

         请点击Demo查看效果,示例支持Chrome、Firefox、Opera、Safari等全系列的现代浏览器。

         

         示例中用到的主要CSS3特性如下:

         border-radius:绘制边框圆角。

         transform:主要是旋转(rotate)和偏斜(skew),用于绘制各种形状。

         animation:动画效果的实现,例如头发的飘动、眼睛的闪动。

         只要掌握了这几个特性,你也能画出同样奇妙的CSS3动画,赶快试试吧!

         相关链接:《用纯CSS3实现QQ Logo

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: 用纯CSS3绘制萌系漫画人物动态头像

用纯CSS3绘制萌系漫画人物动态头像:目前有5 条留言

  1. 5楼
    zhailulu:

    牛。。。

    2012-01-09 19:05 [回复]
  2. 这个亮了。。。。。。学习中

    2012-01-12 13:44 [回复]
  3. 地板
    guangshuai:

    值得学习啊……

    2012-03-18 14:38 [回复]
  4. 板凳
    supegg:

    在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 [回复]
  5. 沙发
    supegg:

    [reply]supegg[/reply]
    那个border是圆的边线,大家修改一下厚度就可以看出来。除此还有div的边线,囧。

    2012-03-19 16:20 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐