开启辅助访问 勋章商城切换到宽版
o(￣ヘ￣o＃) 任务菌(`へ´*)ノ懒人通道_(:3」∠)_签到领奖官方微博紧急反馈中心

搜索
有爱，有技术，有你^_^)y
╱人◕‿‿◕人╲订下契约（注册新用户）

合作站点账号登陆

QQ登录

只需一步，快速开始
快捷导航
技术宅社区 | Z站 有爱，有技术，有你 ^_^)y»论坛 › 历史 › 1编程教学资源共享 › 纯CSS代码绘制秋山澪！还用数位板绘图的你们都OUT了！ ...
12345678910... 12下一页
返回列表 发新帖发新帖
查看: 11904|回复: 164
收起左侧

[css] 纯CSS代码绘制秋山澪！还用数位板绘图的你们都OUT了！

[复制链接]
风音洛洛

该用户从未签到

81

主题

92

好友

2万

积分

第一章

去哪里找比我更懒得

积分
28955
发表于 2012-8-10 10:23:44 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看，没有账号？╱人◕‿‿◕人╲订下契约（注册新用户）

x
（貌似是很早的了，不过估计还有人没看过，所以发一下）
亲们，你们还在用数位板绘图吗？你们out了，真心out了，让我们看看程序员是怎么用代码绘画的吧！
不过因为是CSS3编写的，所以对IE10以下的浏览器不支持，IE10据说支持。。。
请使用Firefox、Chrome、Opera、Safari（不知道为什么我的firefox好像不能正常显示）
QQ截图20120810101842.png
带动画效果的哟！，CSS3什么的果然是神器！。。

传送门

评分

参与人数 1宅魂 +1 宅币 +3 收起 理由
熹薇 + 1 + 3 Σ( ° △ °|||)︴ 不明觉厉

查看全部评分

喂，不要戳奇怪的地方啦~要戳这里！
回复

使用道具 举报

风音洛洛

该用户从未签到

81

主题

92

好友

2万

积分

第一章

去哪里找比我更懒得

积分
28955
 楼主| 发表于 2012-8-10 10:26:57 | 显示全部楼层

css代码

本帖最后由 风音洛洛 于 2012-8-10 10:28 编辑

[mw_shl_code=css,true]@charset "utf-8";
/* CSS Document */
body                        { background: #ffe; }

div#main                { margin: 10px auto; background: #fff; width: 650px; border: 1px solid #ccc; box-shadow: 5px 5px 10px 2px #ccc; }
div#ins                        { position: relative; margin: 4px; height: 480px; overflow: hidden; border: 1px solid #ccc; }

div.draw div        { position: absolute; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; }

/*背景*/
div#bg                        { position: absolute; background: -ms-linear-gradient(top, rgba(255,255,204,1) 20% , rgba(255,204,238,1) 70%); background: -moz-linear-gradient(top, rgba(255,255,204,1) 20% , rgba(255,204,238,1) 70%); background: -o-linear-gradient(top, rgba(255,255,204,1) 20% , rgba(255,204,238,1) 70%); background: -webkit-linear-gradient(top, rgba(255,255,204,1) 20% , rgba(255,204,238,1) 70%); width: 100%; height: 100%; left: 0; top: 0; }

/*頭型*/
div#head                { position: absolute; -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg); -webkit-transform: rotate(25deg); background: #222; border: 2px solid #000; border-bottom: 0; border-radius: 280px 200px 0 0 / 300px 210px 0 0; width: 480px; height: 310px; left: 242px; top: -113px; }

/*髮(後)*/
div#hear_back                        {  }
div#hear_back div                { background: #040204; -ms-animation-duration: 3s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-animation-duration: 3s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
div#hear_back div.pink        { background: #fce; }
div#hear_back div.black        { background: #222; }
div#hear_back div.hb1        { border-top: 6px solid #000; border-left: 6px solid #000; -ms-transform: skew(-39deg,-39deg); -moz-transform: skew(-39deg,-39deg); -o-transform: skew(-39deg,-39deg); -webkit-transform: skew(-39deg,-39deg); border-radius: 15px 0 0 / 15px 0 0; width: 220px; height: 500px; left: 34px; top: 404px; -webkit-animation-name: hb1; -ms-animation-name: hb1; -moz-animation-name: hb1; -o-animation-name: hb1; }
div#hear_back div.hb2        { -ms-transform: rotate(-57deg); -moz-transform: rotate(-57deg); -o-transform: rotate(-57deg); -webkit-transform: rotate(-57deg); width: 200px; height: 65px; left: 50px; top: 392px; }
div#hear_back div.hb3        { width: 35px; height: 120px; left: 137px; top: 245px; }
div#hear_back div.hb4        { -ms-transform: rotate(50deg); -moz-transform: rotate(50deg); -o-transform: rotate(50deg); -webkit-transform: rotate(50deg); width: 14px; height: 50px; left: 143px; top: 280px; }
div#hear_back div.hb5        { border-right: 6px solid #000; border-bottom: 6px solid #000; -ms-transform: skew(-32deg,-44deg); -moz-transform: skew(-32deg,-44deg); -o-transform: skew(-32deg,-44deg); -webkit-transform: skew(-32deg,-44deg); border-radius: 0 0 15px / 0 0 15px; width: 55px; height: 100px; left: 112px; top: 292px; -webkit-animation-name: hb5; -ms-animation-name: hb5; -moz-animation-name: hb5; -o-animation-name: hb5; }
div#hear_back div.hb6        { -ms-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); width: 30px; height: 12px; left: 105px; top: 280px; }
div#hear_back div.hb7        { -ms-transform: rotate(-50deg); -moz-transform: rotate(-50deg); -o-transform: rotate(-50deg); -webkit-transform: rotate(-50deg); width: 40px; height: 30px; left: 75px; top: 310px; }
div#hear_back div.hb8        { -ms-transform: rotate(-57deg); -moz-transform: rotate(-57deg); -o-transform: rotate(-57deg); -webkit-transform: rotate(-57deg); border-radius: 20px 0 0; width: 105px; height: 60px; left: 107px; top: 238px; }
div#hear_back div.hb9        { -ms-transform: rotate(-61deg); -moz-transform: rotate(-61deg); -o-transform: rotate(-61deg); -webkit-transform: rotate(-61deg); border-radius: 20px 0 0; width: 100px; height: 10px; left: 107px; top: 235px; }
div#hear_back div.hb10        { border-left: 2px solid #000; border-bottom: 2px solid #000; -ms-transform: skew(-4deg,-24deg); -moz-transform: skew(-4deg,-24deg); -o-transform: skew(-4deg,-24deg); -webkit-transform: skew(-4deg,-24deg); width: 42px; height: 42px; left: 108px; top: 244px; -webkit-animation-name: hb10; -ms-animation-name: hb10; -moz-animation-name: hb10; -o-animation-name: hb10; }
div#hear_back div.hb11        { border-top: 3px solid #000; border-left: 3px solid #000; -ms-transform: rotate(78deg) skew(32deg,32deg); -moz-transform: rotate(78deg) skew(32deg,32deg); -o-transform: rotate(78deg) skew(32deg,32deg); -webkit-transform: rotate(78deg) skew(32deg,32deg); border-radius: 5px 0 0 / 5px 0 0; width: 30px; height: 40px; left: 37px; top: 449px; -webkit-animation-name: hb11; -ms-animation-name: hb11; -moz-animation-name: hb11; -o-animation-name: hb11; }
div#hear_back div.hb12        { border-top: 6px solid #000; border-left: 6px solid #000; -ms-transform: skew(-27deg,-45deg); -moz-transform: skew(-27deg,-45deg); -o-transform: skew(-27deg,-45deg);-webkit-transform: skew(-27deg,-45deg); border-radius: 15px 0 0 / 15px 0 0; width: 130px; height: 120px; left: 54px; top: 443px; -webkit-animation-name: hb12; -ms-animation-name: hb12; -moz-animation-name: hb12; -o-animation-name: hb12; }
div#hear_back div.hb13        { border-left: 2px solid #000; border-top: 3px solid #000; -ms-transform: skew(5deg,-55deg); -moz-transform: skew(5deg,-55deg); -o-transform: skew(5deg,-55deg); -webkit-transform: skew(5deg,-55deg); border-radius: 30px 50px 0 0 / 30px 30px 0 0; width: 80px; height: 120px; left: 100px; top: 440px; -webkit-animation-name: hb13; -ms-animation-name: hb13; -moz-animation-name: hb13; -o-animation-name: hb13; }
div#hear_back div.hb14        { border-left: 2px solid #000; border-top: 3px solid #000; -ms-transform: skew(25deg,-65deg); -moz-transform: skew(25deg,-65deg); -o-transform: skew(25deg,-65deg); -webkit-transform: skew(25deg,-65deg); border-radius: 10px 70px 0 0 / 10px 40px 0 0; width: 60px; height: 120px; left: 107px; top: 457px; -webkit-animation-name: hb14; -ms-animation-name: hb14; -moz-animation-name: hb14; -o-animation-name: hb14; }
div#hear_back div.hb15        { border: 2px solid #000; border-radius: 12px; width: 20px; height: 20px; left: 108px; top: 468px; -webkit-animation-name: hb15; -ms-animation-name: hb15; -moz-animation-name: hb15; -o-animation-name: hb15; }
div#hear_back div.hb16        { border: 2px solid #000; border-radius: 42px; width: 80px; height: 80px; left: 160px; top: 350px; -webkit-animation-name: hb15; -ms-animation-name: hb15; -moz-animation-name: hb15; -o-animation-name: hb15; }
div#hear_back div.hb17        { border-right: 2px solid #000; -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg); -webkit-transform: rotate(25deg); width: 150px; height: 200px; left: 412px; top: 307px; }
div#hear_back div.hb18        { -ms-transform: rotate(18deg); -moz-transform: rotate(18deg); -o-transform: rotate(18deg); -webkit-transform: rotate(18deg); width: 60px; height: 150px; left: 397px; top: 350px; }

/*服裝*/
div#clothes                                {  }
div#clothes div                        { background: #1f2839; }
div#clothes div.cls1        { width: 55px; height: 50px; left: 210px; top: 435px; }
div#clothes div.cls2        { border-left: 3px solid #000; border-top: 3px solid #000; -ms-transform: skew(-26deg,-13deg); -moz-transform: skew(-26deg,-13deg); -o-transform: skew(-26deg,-13deg); -webkit-transform: skew(-26deg,-13deg); border-radius: 10px 0 0 / 10px 0 0; width: 47px; height: 90px; left: 162px; top: 400px; }
div#clothes div.cls3        { background: #444; border-left: 2px solid #000; -ms-transform: rotate(39deg); -moz-transform: rotate(39deg); -o-transform: rotate(39deg); -webkit-transform: rotate(39deg); width: 25px; height: 120px; left: 200px; top: 410px; }
div#clothes div.cls4        { border-left: 2px solid #000; border-top: 2px solid #000; -ms-transform: skew(3deg,-31deg); -moz-transform: skew(3deg,-31deg); -o-transform: skew(3deg,-31deg); -webkit-transform: skew(3deg,-31deg); width: 52px; height: 40px; left: 168px; top: 455px; }
div#clothes div.cls5        { border-top: 2px solid #000; -ms-transform: rotate(50deg); -moz-transform: rotate(50deg); -o-transform: rotate(50deg); -webkit-transform: rotate(50deg); width: 20px; height: 20px; left: 400px; top: 470px; }
div#clothes div.cls6        { border-right: 1px solid #000; border-bottom: 2px solid #000; -ms-transform: skew(15deg,-50deg); -moz-transform: skew(15deg,-50deg); -o-transform: skew(15deg,-50deg); -webkit-transform: skew(15deg,-50deg); width: 52px; height: 40px; left: 337px; top: 494px; }
div#clothes div.cls7        { background: #aaa; border: 2px solid #000; border-radius: 32px; width: 60px; height: 60px; left: 332px; top: 397px; }
div#clothes div.cls8        { background: #aaa; border-left: 2px solid #000; border-top: 2px solid #000; -ms-transform: skew(3deg,-35deg); -moz-transform: skew(3deg,-35deg); -o-transform: skew(3deg,-35deg); -webkit-transform: skew(3deg,-35deg); border-radius: 30px 0 0 / 20px 0 0; width: 90px; height: 100px; left: 205px; top: 455px; }
div#clothes div.cls9        { background: -ms-linear-gradient(left, rgba(88,129,156,1) 35%,rgba(56,93,120,1) 65%); background: -moz-linear-gradient(left, rgba(88,129,156,1) 35%,rgba(56,93,120,1) 65%); background: -o-linear-gradient(left, rgba(88,129,156,1) 35%,rgba(56,93,120,1) 65%); background: -webkit-linear-gradient(left, rgba(88,129,156,1) 35%,rgba(56,93,120,1) 65%); border: 2px solid #000; border-radius: 32px; width: 60px; height: 60px; left: 182px; top: 470px; }

/*耳朵*/
div#ear                                        {  }
div#ear div                                { background: #fec; }
div#ear div.org                        { background: #da8; }
div#ear div.none                { background: transparent; }
div#ear div.ear1                { border: 2px solid #000; border-left: 0; -ms-transform: skew(-10deg,-30deg); -moz-transform: skew(-10deg,-30deg); -o-transform: skew(-10deg,-30deg); -webkit-transform: skew(-10deg,-30deg); border-radius: 0 20px 15px 0 / 0 30px 15px 0; width: 35px; height: 46px; left: 465px; top: 335px; }
div#ear div.ear2                { border-right: 3px solid #000; border-bottom: 2px solid #000; -ms-transform: skew(-58deg,0); -moz-transform: skew(-58deg,0); -o-transform: skew(-58deg,0); -webkit-transform: skew(-58deg,0); border-radius: 0 0 10px 0 / 0 0 10px 0; width: 35px; height: 12px; left: 433px; top: 376px; }
div#ear div.ear3                { -ms-transform: skew(-4deg,-25deg); -moz-transform: skew(-4deg,-25deg); -o-transform: skew(-4deg,-25deg); -webkit-transform: skew(-4deg,-25deg); border-radius: 0 8px 0 0 / 0 8px 0 0; width: 20px; height: 15px; left: 470px; top: 340px; }
div#ear div.ear4                { -ms-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); -webkit-transform: rotate(15deg); width: 30px; height: 10px; left: 460px; top: 337px; }
div#ear div.ear5                { border-top: 2px solid #000; -ms-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); width: 20px; height: 10px; left: 465px; top: 345px; }
div#ear div.ear6                { border-top: 2px solid #000; border-right: 2px solid #000; -ms-transform: skew(-35deg,10deg); -moz-transform: skew(-35deg,10deg); -o-transform: skew(-35deg,10deg); -webkit-transform: skew(-35deg,10deg); border-radius: 0 8px 0 0 / 0 8px 0 0; width: 10px; height: 8px; left: 465px; top: 350px; }
div#ear div.ear7                { width: 30px; height: 30px; left: 430px; top: 350px; }
div#ear div.ear8                { border-right: 2px solid #000; border-bottom: 2px solid #000; -ms-transform: skew(10deg,-5deg); -moz-transform: skew(10deg,-5deg); -o-transform: skew(10deg,-5deg); -webkit-transform: skew(10deg,-5deg); border-radius: 0 0 20px 0 / 0 0 20px 0; width: 20px; height: 20px; left: 445px; top: 344px; }

/*脖子*/
div#neck                                { border-bottom: 2px solid #000; border-left: 2px solid #000; border-radius: 0 0 70px 30px / 0 0 20px 4px; background: #df9573; -ms-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); width: 80px; height: 30px; left: 242px; top: 440px; }

/*臉部*/
div#face                                {  }
div#face div                        { background: #fec; }
div#face div.sha                { background: #e6926d; }
div#face div.fac1                { -ms-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); width: 200px; height: 200px; left: 188px; top: 250px; }
div#face div.fac2                { width: 30px; height: 30px; left: 300px; top: 410px; }
div#face div.fac3                { border-left: 1px solid #000; border-bottom: 2px solid #000; -ms-transform: skew(-15deg,59deg); -moz-transform: skew(-15deg,59deg); -o-transform: skew(-15deg,59deg); -webkit-transform: skew(-15deg,59deg); border-radius: 0 0 0 10px / 0 0 0 20px; width: 62px; height: 75px; left: 180px; top: 266px; }
div#face div.fac4                { border-left: 2px solid #000; border-bottom: 2px solid #000; -ms-transform: rotate(-35deg) skew(25deg,25deg); -moz-transform: rotate(-35deg) skew(25deg,25deg); -o-transform: rotate(-35deg) skew(25deg,25deg); -webkit-transform: rotate(-35deg) skew(25deg,25deg); border-radius: 0 0 0 38px / 0 0 0 18px; width: 74px; height: 15px; left: 221px; top: 446px; }
div#face div.fac5                { border-left: 2px solid #000; -ms-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -webkit-transform: rotate(3deg); width: 240px; height: 87px; left: 174px; top: 218px; }
div#face div.fac6                { width: 220px; height: 200px; left: 180px; top: 80px; }
div#face div.fac7                { -ms-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); width: 120px; height: 50px; left: 245px; top: 105px; }
div#face div.fac8                { -ms-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); width: 20px; height: 50px; left: 325px; top: 115px; }
div#face div.fac9                { -ms-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); width: 20px; height: 70px; left: 375px; top: 150px; }
div#face div.norse1                { background: #000; border: 2px solid #000; border-radius: 3px; width: 2px; height: 2px; left: 209px; top: 351px; }
div#face div.norse2                { -ms-transform: rotate(40deg); -moz-transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); width: 10px; height: 10px; left: 208px; top: 343px; }
div#face div.mouth1                { border: 1px solid #000; -ms-transform: rotate(55deg); -moz-transform: rotate(55deg); -o-transform: rotate(55deg); -webkit-transform: rotate(55deg); width: 3px; left: 220px; top: 393px; }
div#face div.mouth2                { border: 1px solid #000; -ms-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -webkit-transform: rotate(20deg); width: 10px; left: 234px; top: 404px; }
div#face div.fac10                { background: #fdb; border-radius: 8px; box-shadow: 0 0 15px 7px rgba(255,222,182,1); width: 15px; height: 15px; left: 180px; top: 317px; }
div#face div.fac11                { background: #fdb; border-radius: 8px; box-shadow: 0 0 15px 15px rgba(255,222,182,1); width: 15px; height: 15px; left: 295px; top: 380px; }
div#face div.line                { border: 1px solid #eca; opacity: 0.6; background: transparent; }
div#face div.fac12                { -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -webkit-transform: rotate(60deg); height: 6px; left: 183px; top: 317px; }
div#face div.fac13                { -ms-transform: rotate(40deg); -moz-transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); height: 6px; left: 185px; top: 320px; }
div#face div.fac14                { -ms-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -webkit-transform: rotate(20deg); height: 9px; left: 295px; top: 382px; }
div#face div.fac15                { height: 5px; left: 299px; top: 385px; }
div#face div.fac16                { -ms-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); height: 8px; left: 304px; top: 385px; }

/*眼睛*/
div#eye                                        {  }
div#eye div                                { background: #000; }
div#eye div.line                { background: transparent; }
div#eye div.gray                { background: #ccc; }
div#eye div.white                { background: #fff; }
div#eye div.anime                { -ms-animation-name: kirakira; -ms-animation-duration: 0.5s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -moz-animation-name: kirakira; -moz-animation-duration: 0.5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-animation-name: kirakira; -o-animation-duration: 0.5s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; -webkit-animation-name: kirakira; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
div#eye div.purple                { background: #6c6680; }
div#eye div.eye1                { border-top: 2px solid #000; border-right: 2px solid #000; border-radius: 0 20px 0 0 / 0 22px 0 0; width: 20px; height: 22px; left: 220px; top: 170px; }
div#eye div.eye2                { border-top: 2px solid #000; -ms-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg); -webkit-transform: rotate(35deg); width: 28px; left: 341px; top: 222px; }
div#eye div.eye3                { border-top: 5px solid #000; border-right: 2px solid #000; -ms-transform: skew(0deg,68deg); -moz-transform: skew(0deg,68deg); -o-transform: skew(0deg,68deg); -webkit-transform: skew(0deg,68deg); border-radius: 0 10px 0 0 / 0 5px 0 0; width: 13px; height: 17px; left: 218px; top: 214px; }
div#eye div.eye4                { border-top: 2px solid #000; border-left: 2px solid #000; border-radius: 32px 0 0 / 22px 0 0; width: 30px; height: 20px; left: 301px; top: 272px; }
div#eye div.eye5                { -ms-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); border-radius: 8px 4px 0 0; width: 27px; height: 14px; left: 182px; top: 220px; }
div#eye div.eye6                { -ms-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -webkit-transform: rotate(-8deg); width: 9px; height: 26px; left: 186px; top: 225px; }
div#eye div.eye7                { -ms-transform: rotate(-28deg); -moz-transform: rotate(-28deg); -o-transform: rotate(-28deg); -webkit-transform: rotate(-28deg); width: 10px; height: 27px; left: 200px; top: 220px; }
div#eye div.eye8                { border-radius: 15px 10px 0 0 / 25px 25px 0 0; width: 27px; height: 27px; left: 190px; top: 225px; }
div#eye div.eye9                { border-radius: 15px 17px 17px 15px / 25px; width: 32px; height: 63px; left: 189px; top: 234px; }
div#eye div.eye10                { background: #000; border-radius: 17px 11px 15px 11px / 35px 20px 22px 27px; width: 28px; height: 65px; left: 196px; top: 232px; }
div#eye div.eye11                { border-radius: 7px 4px 5px 6px / 7px 5px 5px 12px; width: 9px; height: 17px; left: 213px; top: 250px; }
div#eye div.eye12                { border-radius: 3px; width: 5px; height: 5px; left: 206px; top: 252px; }
div#eye div.eye13                { border-radius: 5px 10px 10px 10px / 5px 6px 8px 12px; width: 19px; height: 15px; left: 200px; top: 280px; }
div#eye div.eye14                { border-radius: 3px; width: 5px; height: 5px; left: 201px; top: 283px; }
div#eye div.eye15                { border-left: 1px solid #000; -ms-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -webkit-transform: rotate(20deg); height: 5px; left: 208px; top: 286px; }
div#eye div.eye16                { border-left: 1px solid #000; height: 4px; left: 211px; top: 287px; }
div#eye div.eye17                { border-top: 3px solid #000; border-left: 3px solid #000; background: -ms-linear-gradient(top left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 50%); background: -moz-linear-gradient(top left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 50%); background: -o-linear-gradient(top left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 50%); background: -webkit-linear-gradient(top left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 50%); -ms-transform: rotate(-92deg) skew(41deg,41deg); -moz-transform: rotate(-92deg) skew(41deg,41deg); -o-transform: rotate(-92deg) skew(41deg,41deg); -webkit-transform: rotate(-92deg) skew(41deg,41deg); width: 17px; height: 17px; left: 305px; top: 309px; }
div#eye div.eye18                { border-radius: 35px 45px 0 0 / 17px 55px 0 0; width: 75px; height: 75px; left: 315px; top: 280px; }
div#eye div.eye19                { border-radius: 40px 40px 20px 0 / 18px 45px 25px 0; width: 73px; height: 62px; left: 310px; top: 292px; }
div#eye div.eye20                { border-radius: 20px 60px 50px 25px / 35px 50px 35px 25px; width: 70px; height: 72px; left: 305px; top: 298px; }
div#eye div.eye21                { border-bottom: 2px solid #000; -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg);-webkit-transform: rotate(30deg); border-radius: 2px; width: 20px; left: 308px; top: 360px; }
div#eye div.eye22                { border-radius: 36px 20px / 46px 20px; width: 59px; height: 71px; left: 314px; top: 292px; }
div#eye div.eye23                { background: #444; border-radius: 28px 7px 13px 10px / 30px 10px 15px 15px; width: 32px; height: 42px; left: 322px; top: 311px; }
div#eye div.eye24                { border-radius: 10px 18px 18px 10px / 10px; width: 26px; height: 18px; left: 322px; top: 337px; }
div#eye div.eye25                { border-radius: 15px 10px / 15px 10px; width: 25px; height: 30px; left: 334px; top: 311px; }
div#eye div.eye26                { border-radius: 8px; width: 16px; height: 23px; left: 354px; top: 301px; }
div#eye div.eye27                { border-radius: 5px; width: 9px; height: 9px; left: 314px; top: 341px; }
div#eye div.eye28                { border-radius: 4px; width: 7px; height: 7px; left: 340px; top: 303px; }
div#eye div.eye29                { border-left: 1px solid #000; height: 4px; left: 330px; top: 345px; }
div#eye div.eye30                { border-left: 1px solid #000; -ms-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); height: 4px; left: 334px; top: 347px; }
div#eye div.eye31                { border-left: 1px solid #000; -ms-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg);-webkit-transform: rotate(-25deg); height: 4px; left: 339px; top: 346px; }

/*髮(前)*/
div#hair_front                        {  }
div#hair_front div                { background: #222; -ms-animation-duration: 3s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-animation-duration: 3s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
div#hair_front div.hf1        { width: 40px; height: 80px; left: 360px; top: 75px; }
div#hair_front div.hf2        { width: 90px; height: 80px; left: 175px; top: 75px; }
div#hair_front div.hf3        { background: #fff; width: 40px; height: 40px; left: 355px; top: 380px; }
div#hair_front div.hf4        { background: #040204; width: 30px; height: 40px; left: 395px; top: 380px; }
div#hair_front div.hf5        { -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 60px; height: 110px; left: 295px; top: 25px; }
div#hair_front div.hf6        { background: transparent; border-top: 4px solid #000; border-left: 4px solid #000; -ms-transform: rotate(-5deg) skew(-30deg,-32deg); -moz-transform: rotate(-5deg) skew(-30deg,-32deg); -o-transform: rotate(-5deg) skew(-30deg,-32deg);-webkit-transform: rotate(-5deg) skew(-30deg,-32deg); border-radius: 35px 0 0 / 35px 0 0; width: 130px; height: 65px; left: 75px; top: 142px; -webkit-animation-name: hf6; -ms-animation-name: hf6; -moz-animation-name: hf6; -o-animation-name: hf6; }
div#hair_front div.hf7        { background: -ms-linear-gradient(top left, rgba(0,0,0,0) 55%,rgba(32,32,32,1) 55%); background: -moz-linear-gradient(top left, rgba(0,0,0,0) 55%,rgba(32,32,32,1) 55%); background: -o-linear-gradient(top left, rgba(0,0,0,0) 55%,rgba(32,32,32,1) 55%); background: -webkit-linear-gradient(top left, rgba(0,0,0,0) 55%,rgba(32,32,32,1) 55%); border-right: 15px solid #000; border-bottom: 15px solid #000; -ms-transform: rotate(68deg) skew(42deg,42deg); -moz-transform: rotate(68deg) skew(42deg,42deg); -o-transform: rotate(68deg) skew(42deg,42deg); -webkit-transform: rotate(68deg) skew(42deg,42deg); width: 55px; height: 55px; left: 155px; top: 76px; -webkit-animation-name: hf7; -ms-animation-name: hf7; -moz-animation-name: hf7; -o-animation-name: hf7; }
div#hair_front div.hf8        { background: -ms-linear-gradient(top, rgba(0,0,0,0) 40%,rgba(32,32,32,1) 40%); background: -moz-linear-gradient(top, rgba(0,0,0,0) 40%,rgba(32,32,32,1) 40%); background: -o-linear-gradient(top, rgba(0,0,0,0) 40%,rgba(32,32,32,1) 40%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 40%,rgba(32,32,32,1) 40%); border-right: 6px solid #000; border-bottom: 6px solid #000; -ms-transform: rotate(64deg) skew(37deg,37deg); -moz-transform: rotate(64deg) skew(37deg,37deg); -o-transform: rotate(64deg) skew(37deg,37deg); -webkit-transform: rotate(64deg) skew(37deg,37deg); width: 90px; height: 100px; left: 182px; top: 45px; -webkit-animation-name: hf8; -ms-animation-name: hf8; -moz-animation-name: hf8; -o-animation-name: hf8; }
div#hair_front div.hf9        { border-left: 2px solid #000; -ms-transform: rotate(13deg) skew(-2deg,-2deg); -moz-transform: rotate(13deg) skew(-2deg,-2deg); -o-transform: rotate(13deg) skew(-2deg,-2deg); -webkit-transform: rotate(13deg) skew(-2deg,-2deg); width: 35px; height: 70px; left: 167px; top: 134px; -webkit-animation-name: hf9; -ms-animation-name: hf9; -moz-animation-name: hf9; -o-animation-name: hf9; }
div#hair_front div.hf10        { border-right: 2px solid #000; border-bottom: 2px solid #000; -ms-transform: rotate(38deg) skew(-2deg,-2deg); -moz-transform: rotate(38deg) skew(-2deg,-2deg); -o-transform: rotate(38deg) skew(-2deg,-2deg); -webkit-transform: rotate(38deg) skew(-2deg,-2deg); width: 35px; height: 100px; left: 214px; top: 123px; -webkit-animation-name: hf10; -ms-animation-name: hf10; -moz-animation-name: hf10; -o-animation-name: hf10; }
div#hair_front div.hf11        { border-left: 2px solid #000; border-bottom: 2px solid #000; -ms-transform: rotate(32deg) skew(0,15deg); -moz-transform: rotate(32deg) skew(0,15deg); -o-transform: rotate(32deg) skew(0,15deg); -webkit-transform: rotate(32deg) skew(0,15deg); width: 13px; height: 65px; left: 242px; top: 143px; -webkit-animation-name: hf11; -ms-animation-name: hf11; -moz-animation-name: hf11; -o-animation-name: hf11; }
div#hair_front div.hf12        { border-right: 2px solid #000; -ms-transform: rotate(42deg); -moz-transform: rotate(42deg); -o-transform: rotate(42deg); -webkit-transform: rotate(42deg); width: 12px; height: 180px; left: 328px; top: 69px; -webkit-animation-name: hf12; -ms-animation-name: hf12; -moz-animation-name: hf12; -o-animation-name: hf12; }
div#hair_front div.hf13        { border-right: 8px solid #000; -ms-transform: rotate(83deg) skew(39deg,39deg); -moz-transform: rotate(83deg) skew(39deg,39deg); -o-transform: rotate(83deg) skew(39deg,39deg); -webkit-transform: rotate(83deg) skew(39deg,39deg); width: 110px; height: 125px; left: 435px; top: -30px; -webkit-animation-name: hf13; -ms-animation-name: hf13; -moz-animation-name: hf13; -o-animation-name: hf13; }
div#hair_front div.hf14        { border-left: 2px solid #000; -ms-transform: rotate(39deg); -moz-transform: rotate(39deg); -o-transform: rotate(39deg); -webkit-transform: rotate(39deg); width: 35px; height: 120px; left: 360px; top: 388px; -webkit-animation-name: hf14; -ms-animation-name: hf14; -moz-animation-name: hf14; -o-animation-name: hf14; }
div#hair_front div.hf15        { border-right: 2px solid #000; -ms-transform: rotate(40deg); -moz-transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); width: 35px; height: 190px; left: 439px; top: 320px; -webkit-animation-name: hf15; -ms-animation-name: hf15; -moz-animation-name: hf15; -o-animation-name: hf15; }
div#hair_front div.hf16        { border-right: 2px solid #000; -ms-transform: rotate(40deg); -moz-transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); overflow: hidden; width: 50px; height: 190px; left: 428px; top: 310px; -webkit-animation-name: hf15; -ms-animation-name: hf15; -moz-animation-name: hf15; -o-animation-name: hf15; }
div#hair_front div.hf16 div { background: #040204; margin: 0 0 0 -150px; border: 1px solid #040204; border-radius: 0 80px 120px 0 / 0 80px 120px 0; width: 200px; height: 190px; }
div#hair_front div.hf17        { -ms-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); width: 60px; height: 30px; left: 390px; top: 340px; }
div#hair_front div.hf18        { border-right: 8px solid #000; border-bottom: 8px solid #000; -ms-transform: rotate(79deg) skew(39deg,39deg); -moz-transform: rotate(79deg) skew(39deg,39deg); -o-transform: rotate(79deg) skew(39deg,39deg); -webkit-transform: rotate(79deg) skew(39deg,39deg); width: 80px; height: 40px; left: 326px; top: 83px; -webkit-animation-name: hf18; -ms-animation-name: hf18; -moz-animation-name: hf18; -o-animation-name: hf18; }
div#hair_front div.hf19        { border-left: 2px solid #000; -ms-transform: rotate(28deg); -moz-transform: rotate(28deg); -o-transform: rotate(28deg); -webkit-transform: rotate(28deg); width: 48px; height: 140px; left: 361px; top: 85px; -webkit-animation-name: hf19; -ms-animation-name: hf19; -moz-animation-name: hf19; -o-animation-name: hf19; }
div#hair_front div.hf20        { border-right: 7px solid #000; border-bottom: 7px solid #000; -ms-transform: rotate(75deg) skew(38deg,38deg); -moz-transform: rotate(75deg) skew(38deg,38deg); -o-transform: rotate(75deg) skew(38deg,38deg); -webkit-transform: rotate(75deg) skew(38deg,38deg); width: 40px; height: 44px; left: 334px; top: 158px; -webkit-animation-name: hf20; -ms-animation-name: hf20; -moz-animation-name: hf20; -o-animation-name: hf20; }
div#hair_front div.hf21        { border-left: 2px solid #000; border-bottom: 2px solid #000; -ms-transform: rotate(21deg) skew(3deg,3deg); -moz-transform: rotate(21deg) skew(3deg,3deg); -o-transform: rotate(21deg) skew(3deg,3deg); -webkit-transform: rotate(21deg) skew(3deg,3deg); width: 25px; height: 45px; left: 307px; top: 214px; -webkit-animation-name: hf21; -ms-animation-name: hf21; -moz-animation-name: hf21; -o-animation-name: hf21; }
div#hair_front div.hf22        { border-right: 2px solid #000; -ms-transform: rotate(32deg); -moz-transform: rotate(32deg); -o-transform: rotate(32deg);-webkit-transform: rotate(32deg); width: 25px; height: 140px; left: 369px; top: 135px; -webkit-animation-name: hf22; -ms-animation-name: hf22; -moz-animation-name: hf22; -o-animation-name: hf22; }
div#hair_front div.hf23        { border-left: 2px solid #000; -ms-transform: rotate(16deg); -moz-transform: rotate(16deg); -o-transform: rotate(16deg); -webkit-transform: rotate(16deg); width: 60px; height: 110px; left: 388px; top: 150px; -webkit-animation-name: hf23; -ms-animation-name: hf23; -moz-animation-name: hf23; -o-animation-name: hf23; }
div#hair_front div.hf24        { background: transparent; border-left: 2px solid #000; -ms-transform: rotate(16deg); -moz-transform: rotate(16deg); -o-transform: rotate(16deg); -webkit-transform: rotate(16deg); width: 60px; height: 20px; left: 358px; top: 256px; -webkit-animation-name: hf24; -ms-animation-name: hf24; -moz-animation-name: hf24; -o-animation-name: hf24; }
div#hair_front div.hf25        { border-left: 2px solid #000; border-bottom: 2px solid #000; -ms-transform: rotate(11deg) skew(12deg,12deg); -moz-transform: rotate(11deg) skew(12deg,12deg); -o-transform: rotate(11deg) skew(12deg,12deg); -webkit-transform: rotate(11deg) skew(12deg,12deg); width: 60px; height: 26px; left: 359px; top: 250px; -webkit-animation-name: hf25; -ms-animation-name: hf25; -moz-animation-name: hf25; -o-animation-name: hf25; }
div#hair_front div.hf26        { background: -ms-linear-gradient(top left, rgba(255,238,204,1) 50%,rgba(0,0,0,0) 50%); background: -moz-linear-gradient(top left, rgba(255,238,204,1) 50%,rgba(0,0,0,0) 50%); background: -o-linear-gradient(top left, rgba(255,238,204,1) 50%,rgba(0,0,0,0) 50%); background: -webkit-linear-gradient(top left, rgba(255,238,204,1) 50%,rgba(0,0,0,0) 50%); border-top: 5px solid #000; border-left: 5px solid #000; -ms-transform: rotate(60deg) skew(37deg,37deg); -moz-transform: rotate(60deg) skew(37deg,37deg); -o-transform: rotate(60deg) skew(37deg,37deg); -webkit-transform: rotate(60deg) skew(37deg,37deg); width: 18px; height: 16px; left: 388px; top: 258px; -webkit-animation-name: hf26; -ms-animation-name: hf26; -moz-animation-name: hf26; -o-animation-name: hf26; }
div#hair_front div.hf27        { border-bottom: 2px solid #000; -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -webkit-transform: rotate(30deg); width: 23px; height: 70px; left: 419px; top: 228px; -webkit-animation-name: hf27; -ms-animation-name: hf27; -moz-animation-name: hf27; -o-animation-name: hf27; }
div#hair_front div.hf28        { border-left: 2px solid #000; -ms-transform: rotate(29deg); -moz-transform: rotate(29deg); -o-transform: rotate(29deg); -webkit-transform: rotate(29deg); width: 35px; height: 180px; left: 463px; top: 191px; -webkit-animation-name: hf28; -ms-animation-name: hf28; -moz-animation-name: hf28; -o-animation-name: hf28; }
div#hair_front div.hf29        { border-right: 2px solid #000; -ms-transform: rotate(33deg); -moz-transform: rotate(33deg); -o-transform: rotate(33deg); -webkit-transform: rotate(33deg); width: 33px; height: 120px; left: 502px; top: 225px; -webkit-animation-name: hf29; -ms-animation-name: hf29; -moz-animation-name: hf29; -o-animation-name: hf29; }
div#hair_front div.hf30        { border-right: 4px solid #000; border-bottom: 4px solid #000; -ms-transform: rotate(92deg) skew(30deg,30deg); -moz-transform: rotate(92deg) skew(30deg,30deg); -o-transform: rotate(92deg) skew(30deg,30deg); -webkit-transform: rotate(92deg) skew(30deg,30deg); width: 12px; height: 50px; left: 453px; top: 340px; -webkit-animation-name: hf30; -ms-animation-name: hf30; -moz-animation-name: hf30; -o-animation-name: hf30; }
div#hair_front div.hf31        { border-right: 4px solid #000; border-bottom: 4px solid #000; -ms-transform: rotate(95deg) skew(30deg,30deg); -moz-transform: rotate(95deg) skew(30deg,30deg); -o-transform: rotate(95deg) skew(30deg,30deg); -webkit-transform: rotate(95deg) skew(30deg,30deg); width: 50px; height: 60px; left: 443px; top: 317px; -webkit-animation-name: hf31; -ms-animation-name: hf31; -moz-animation-name: hf31; -o-animation-name: hf31; }
div#hair_front div.hf32        { background: transparent; border-right: 2px solid #000; -ms-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg); -webkit-transform: rotate(35deg); width: 33px; height: 120px; left: 450px; top: 247px; -webkit-animation-name: hf32; -ms-animation-name: hf32; -moz-animation-name: hf32; -o-animation-name: hf32; }
div#hair_front div.hf33        { border-right: 2px solid #000; -ms-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg); -webkit-transform: rotate(35deg); width: 13px; height: 90px; left: 484px; top: 272px; -webkit-animation-name: hf32; -ms-animation-name: hf32; -moz-animation-name: hf32; -o-animation-name: hf32; }

/*光暈*/
div#light                                {  }
div#light div                        { border: 1px solid #444; box-shadow: 0 0 3px rgba(68,68,68,1); -ms-animation-duration: 3s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-animation-duration: 3s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
div#light div.light1        { -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -webkit-transform: rotate(60deg); height: 53px; left: 378px; top: 10px; }
div#light div.light2        { -ms-transform: rotate(55deg); -moz-transform: rotate(55deg); -o-transform: rotate(55deg); -webkit-transform: rotate(55deg); height: 45px; left: 374px; top: 25px; }
div#light div.light3        { -ms-transform: rotate(32deg); -moz-transform: rotate(32deg); -o-transform: rotate(32deg); -webkit-transform: rotate(32deg); height: 95px; left: 422px; top: 60px; }
div#light div.light4        { -ms-transform: rotate(22deg); -moz-transform: rotate(22deg); -o-transform: rotate(22deg); -webkit-transform: rotate(22deg); height: 75px; left: 432px; top: 130px; }
div#light div.light5        { -ms-transform: rotate(14deg); -moz-transform: rotate(14deg); -o-transform: rotate(14deg); -webkit-transform: rotate(14deg); height: 58px; left: 430px; top: 160px; }
div#light div.light6        { -ms-transform: rotate(22deg); -moz-transform: rotate(22deg); -o-transform: rotate(22deg); -webkit-transform: rotate(22deg); height: 45px; left: 557px; top: 223px; }
div#light div.light7        { -ms-transform: rotate(22deg); -moz-transform: rotate(22deg); -o-transform: rotate(22deg); -webkit-transform: rotate(22deg); height: 75px; left: 567px; top: 240px; }
div#light div.light8        { border-radius: 2px; background: #444; -ms-transform: rotate(48deg); -moz-transform: rotate(48deg); -o-transform: rotate(48deg); -webkit-transform: rotate(48deg); width: 1px; height: 45px; left: 325px; top: 450px; -webkit-animation-name: light8; -ms-animation-name: light8; -moz-animation-name: light8; -o-animation-name: light8; }
div#light div.light9        { border: 0; border-top: 6px solid #444; border-left: 4px solid #444; -ms-transform: skew(-30deg,-43deg); -moz-transform: skew(-30deg,-43deg); -o-transform: skew(-30deg,-43deg); -webkit-transform: skew(-30deg,-43deg); border-radius: 15px 0 0 / 15px 0 0; box-shadow: 0 0; width: 74px; height: 30px; left: 44px; top: 417px; -webkit-animation-name: light9; -ms-animation-name: light9; -moz-animation-name: light9; -o-animation-name: light9; }
div#light div.light10        { border: 0; border-top: 4px solid #444; border-left: 6px solid #444; -ms-transform: skew(-50deg,-18deg); -moz-transform: skew(-50deg,-18deg); -o-transform: skew(-50deg,-18deg); -webkit-transform: skew(-50deg,-18deg); border-radius: 45px 0 0 / 25px 0 0; box-shadow: 0 0; width: 120px; height: 28px; left: 245px; top: 36px; }
div#light div.light11        { border: 0; border-right: 5px solid #444; border-bottom: 6px solid #444; -ms-transform: skew(-18deg,-45deg); -moz-transform: skew(-18deg,-45deg); -o-transform: skew(-18deg,-45deg); -webkit-transform: skew(-18deg,-45deg); border-radius: 0 10px 75px 0 / 0 75px 150px 0; box-shadow: 0 0; width: 75px; height: 170px; left: 450px; top: 185px; -webkit-animation-name: light11; -ms-animation-name: light11; -moz-animation-name: light11; -o-animation-name: light11; }

/*陰影*/
div#dark                                {  }
div#dark div                        { background: #040204; }
div#dark div.dark1                { background: transparent; border: 1px solid #040204; -ms-transform: rotate(26deg); -moz-transform: rotate(26deg); -o-transform: rotate(26deg); -webkit-transform: rotate(26deg); height: 150px; left: 520px; top: 320px; }
div#dark div.dark2                { background: transparent; border: 1px solid #040204; -ms-transform: rotate(22deg); -moz-transform: rotate(22deg); -o-transform: rotate(22deg); -webkit-transform: rotate(22deg); height: 45px; left: 520px; top: 190px; }
div#dark div.dark3                { -ms-transform: rotate(75deg) skew(34deg,34deg); -moz-transform: rotate(75deg) skew(34deg,34deg); -o-transform: rotate(75deg) skew(34deg,34deg); -webkit-transform: rotate(75deg) skew(34deg,34deg); border-radius: 5px 0 0 / 5px 0 0; width: 40px; height: 50px; left: 463px; top: 440px; }
div#dark div.dark4                { -ms-transform: rotate(78deg) skew(38deg,38deg); -moz-transform: rotate(78deg) skew(38deg,38deg); -o-transform: rotate(78deg) skew(38deg,38deg); -webkit-transform: rotate(78deg) skew(38deg,38deg); border-radius: 0 0 0 35px / 0 0 0 35px; width: 40px; height: 50px; left: 423px; top: 100px; }
div#dark div.dark5                { -ms-transform: rotate(68deg) skew(39deg,39deg); -moz-transform: rotate(68deg) skew(39deg,39deg); -o-transform: rotate(68deg) skew(39deg,39deg); -webkit-transform: rotate(68deg) skew(39deg,39deg); border-radius: 0 0 0 55px / 0 0 0 55px; width: 70px; height: 100px; left: 493px; top: 100px; }
div#dark div.dark6                { border: 1px solid #040204; -ms-transform: rotate(89deg) skew(36deg,36deg); -moz-transform: rotate(89deg) skew(36deg,36deg); -o-transform: rotate(89deg) skew(36deg,36deg); -webkit-transform: rotate(89deg) skew(36deg,36deg); border-radius: 0 0 0 35px / 0 0 0 35px; width: 40px; height: 50px; left: 280px; top: 87px; }
div#dark div.dark7                { border: 1px solid #040204; -ms-transform: rotate(101deg) skew(34deg,34deg); -moz-transform: rotate(101deg) skew(34deg,34deg); -o-transform: rotate(101deg) skew(34deg,34deg); -webkit-transform: rotate(101deg) skew(34deg,34deg); border-radius: 0 0 0 35px / 0 0 0 35px; width: 40px; height: 50px; left: 330px; top: 62px; }
div#dark div.dark8                { border: 1px solid #222; background: #222; -ms-transform: rotate(93deg) skew(36deg,36deg); -moz-transform: rotate(93deg) skew(36deg,36deg); -o-transform: rotate(93deg) skew(36deg,36deg); -webkit-transform: rotate(93deg) skew(36deg,36deg); border-radius: 0 0 0 35px / 0 0 0 35px; width: 40px; height: 50px; left: 286px; top: 93px; }
div#dark div.dark9                { border: 1px solid #222; background: #222; -ms-transform: rotate(95deg) skew(36deg,36deg); -moz-transform: rotate(95deg) skew(36deg,36deg); -o-transform: rotate(93deg) skew(36deg,36deg); -webkit-transform: rotate(95deg) skew(36deg,36deg); border-radius: 0 0 0 35px / 0 0 0 35px; width: 40px; height: 50px; left: 335px; top: 60px; }

div.copy                                { padding: 0 0 4px; font-family: 'Century Gothic', 'Lucida Grande', 'Microsoft JhengHei', '微軟正黑體', Tahoma, PMingLiu; font-size: 12px; text-align: center; color: #660; text-shadow: 2px 2px 2px #aaa; }

a                                                { color: #09f; }
a:hover                                        { color: #008; }

div.text                                { margin: 10px auto; width: 700px; }
div.text p                                { font-family: 'Century Gothic', 'Lucida Grande', 'Microsoft JhengHei', '微軟正黑體', Tahoma, PMingLiu; font-size: 12px; text-align: center; color: #660; text-shadow: 2px 2px 2px #aaa; }
div.text b                                { color: #c44; }

@-webkit-keyframes kirakira {
        0%, 50%, 100% { margin: 0; }
        25%, 75% { margin: 0 0 0 2px; }
}

@-ms-keyframes kirakira {
        0%, 50%, 100% { margin: 0; }
        25%, 75% { margin: 0 0 0 1px; }
}

@-moz-keyframes kirakira {
        0%, 50%, 100% { margin: 0; }
        25%, 75% { margin: 0 0 0 1px; }
}

@-o-keyframes kirakira {
        0%, 50%, 100% { margin: 0; }
        25%, 75% { margin: 0 0 0 1px; }
}

/*頭髮動畫*/
@-webkit-keyframes hb1 {
        0%, 50%, 100% { margin: 0; -webkit-transform: rotate(-0.5deg) skew(-39deg,-39deg); }
        25%, 75% { margin: -3px 0 0; -webkit-transform: rotate(0.5deg) skew(-39deg,-39deg); }
}
@-webkit-keyframes hb5 {
        0%, 50%, 100% { margin: -2px 0 0; -webkit-transform: rotate(-0.5deg) skew(-32deg,-44deg); }
        25%, 75% { margin: -4px 0 0; -webkit-transform: rotate(0deg) skew(-32deg,-44deg); }
}
@-webkit-keyframes hb10 {
        0%, 50%, 100% { -webkit-transform: rotate(-1deg) skew(-4deg,-24deg); }
        25%, 75% { -webkit-transform: rotate(2deg) skew(-4deg,-24deg); }
}
@-webkit-keyframes hb11 {
        0%, 50%, 100% { -webkit-transform: rotate(77deg) skew(32deg,32deg); }
        25%, 75% { -webkit-transform: rotate(80deg) skew(32deg,32deg); }
}
@-webkit-keyframes hb12 {
        0%, 50%, 100% { -webkit-transform: rotate(2deg) skew(-27deg,-45deg); }
        25%, 75% { -webkit-transform: rotate(0.5deg) skew(-27deg,-45deg); }
}
@-webkit-keyframes hb13 {
        0%, 50%, 100% { -webkit-transform: rotate(2deg) skew(5deg,-55deg); }
        25%, 75% { -webkit-transform: rotate(-1deg) skew(5deg,-55deg); }
}
@-webkit-keyframes hb14 {
        0%, 50%, 100% { -webkit-transform: rotate(2deg) skew(25deg,-65deg); }
        25%, 75% { -webkit-transform: rotate(-1deg) skew(25deg,-65deg); }
}
@-webkit-keyframes hb15 {
        0%, 50%, 100% { margin: 0; }
        25%, 75% { margin: 0 0 0 -2px; }
}
@-webkit-keyframes hf6 {
        0%, 50%, 100% { margin: 0; -webkit-transform: rotate(-5deg) skew(-30deg,-32deg); }
        25%, 75% { margin: -7px 0 0; -webkit-transform: rotate(-3deg) skew(-30deg,-32deg); }
}
@-webkit-keyframes hf7 {
        0%, 50%, 100% { margin: 0 0 0 0; -webkit-transform: rotate(67.5deg) skew(42deg,42deg); }
        25%, 75% { margin: -1px 0 0 1px; -webkit-transform: rotate(68.5deg) skew(42deg,42deg); }
}
@-webkit-keyframes hf8 {
        0%, 50%, 100% { -webkit-transform: rotate(63.5deg) skew(37deg,37deg); }
        25%, 75% { -webkit-transform: rotate(64.5deg) skew(37deg,37deg); }
}
@-webkit-keyframes hf9 {
        0%, 50%, 100% { -webkit-transform: rotate(12.5deg) skew(-2deg,-2deg); }
        25%, 75% { -webkit-transform: rotate(13.5deg) skew(-2deg,-2deg); }
}
@-webkit-keyframes hf10 {
        0%, 50%, 100% { -webkit-transform: rotate(37.5deg) skew(-2deg,-2deg); }
        25%, 75% { -webkit-transform: rotate(38.5deg) skew(-2deg,-2deg); }
}

@-webkit-keyframes hf11 {
        0%, 50%, 100% { margin-top: 0; -webkit-transform: rotate(31.5deg) skew(0,15deg); }
        25%, 75% { margin-top: -2px; -webkit-transform: rotate(32.5deg) skew(0,15deg); }
}

@-webkit-keyframes hf12 {
        0%, 50%, 100% { margin: -1px 0 0 0; -webkit-transform: rotate(41.5deg); }
        25%, 75% { margin: -3px 0 0 -1px; -webkit-transform: rotate(42.5deg); }
}

@-webkit-keyframes hf13 {
        0%, 50%, 100% { -webkit-transform: rotate(82.5deg) skew(39deg,39deg); }
        25%, 75% { -webkit-transform: rotate(83.5deg) skew(39deg,39deg); }
}

@-webkit-keyframes hf14 {
        0%, 50%, 100% { -webkit-transform: rotate(38.5deg); }
        25%, 75% { -webkit-transform: rotate(39.5deg); }
}

@-webkit-keyframes hf15 {
        0%, 50%, 100% { -webkit-transform: rotate(39.5deg); }
        25%, 75% { -webkit-transform: rotate(40.5deg); }
}

@-webkit-keyframes hf18 {
        0%, 50%, 100% { -webkit-transform: rotate(78.5deg) skew(39deg,39deg); }
        25%, 75% { -webkit-transform: rotate(79.5deg) skew(39deg,39deg); }
}

@-webkit-keyframes hf19 {
        0%, 50%, 100% { -webkit-transform: rotate(27.5deg); }
        25%, 75% { -webkit-transform: rotate(28.5deg); }
}

@-webkit-keyframes hf20 {
        0%, 50%, 100% { margin: 0; -webkit-transform: rotate(74.5deg) skew(38deg,38deg); }
        25%, 75% { margin: 0 0 0 -1px; -webkit-transform: rotate(75.5deg) skew(38deg,38deg); }
}

@-webkit-keyframes hf21 {
        0%, 50%, 100% { margin: 0; -webkit-transform: rotate(20.5deg) skew(3deg,3deg); }
        25%, 75% { margin: 0 0 0 -1px; -webkit-transform: rotate(21.5deg) skew(3deg,3deg); }
}

@-webkit-keyframes hf22 {
        0%, 50%, 100% { -webkit-transform: rotate(31.5deg); }
        25%, 75% { -webkit-transform: rotate(32.5deg); }
}

@-webkit-keyframes hf23 {
        0%, 50%, 100% { -webkit-transform: rotate(15.5deg); }
        25%, 75% { -webkit-transform: rotate(16.5deg); }
}

@-webkit-keyframes hf24 {
        0%, 50%, 100% { margin: -1px 0 0 0; -webkit-transform: rotate(15.5deg); }
        25%, 75% { margin: -1px 0 0 -1px; -webkit-transform: rotate(16.5deg); }
}

@-webkit-keyframes hf25 {
        0%, 50%, 100% { -webkit-transform: rotate(10.5deg) skew(12deg,12deg); }
        25%, 75% { -webkit-transform: rotate(11.5deg) skew(12deg,12deg); }
}

@-webkit-keyframes hf26 {
        0%, 50%, 100% { -webkit-transform: rotate(59.5deg) skew(37deg,37deg); }
        25%, 75% { -webkit-transform: rotate(60.5deg) skew(37deg,37deg); }
}

@-webkit-keyframes hf27 {
        0%, 50%, 100% { -webkit-transform: rotate(29.5deg); }
        25%, 75% { -webkit-transform: rotate(30.5deg); }
}

@-webkit-keyframes hf28 {
        0%, 50%, 100% { -webkit-transform: rotate(28.5deg); }
        25%, 75% { -webkit-transform: rotate(29.5deg); }
}

@-webkit-keyframes hf29 {
        0%, 50%, 100% { -webkit-transform: rotate(32.5deg); }
        25%, 75% { -webkit-transform: rotate(33.5deg); }
}

@-webkit-keyframes hf30 {
        0%, 50%, 100% { -webkit-transform: rotate(91.5deg) skew(30deg,30deg); }
        25%, 75% { -webkit-transform: rotate(92.5deg) skew(30deg,30deg); }
}

@-webkit-keyframes hf31 {
        0%, 50%, 100% { -webkit-transform: rotate(94.5deg) skew(30deg,30deg); }
        25%, 75% { -webkit-transform: rotate(95.5deg) skew(30deg,30deg); }
}

@-webkit-keyframes hf32 {
        0%, 50%, 100% { -webkit-transform: rotate(34.5deg); }
        25%, 75% { -webkit-transform: rotate(35.5deg); }
}
@-webkit-keyframes light8 {
        0%, 50%, 100% { -webkit-transform: rotate(45.5deg); }
        25%, 75% { -webkit-transform: rotate(50.5deg); }
}
@-webkit-keyframes light9 {
        0%, 50%, 100% { -webkit-transform: rotate(1deg) skew(-30deg,-43deg); }
        25%, 75% { -webkit-transform: rotate(-2deg) skew(-30deg,-43deg); }
}
@-webkit-keyframes light11 {
        0%, 50%, 100% { -webkit-transform: rotate(-0.5deg) skew(-18deg,-45deg); }
        25%, 75% {  -webkit-transform: rotate(0.5deg) skew(-18deg,-45deg); }
}

@-ms-keyframes hb1 {
        0%, 50%, 100% { margin: 0; -ms-transform: rotate(-0.5deg) skew(-39deg,-39deg); }
        25%, 75% { margin: -3px 0 0; -ms-transform: rotate(0.5deg) skew(-39deg,-39deg); }
}
@-ms-keyframes hb5 {
        0%, 50%, 100% { margin: -2px 0 0; -ms-transform: rotate(-0.5deg) skew(-32deg,-44deg); }
        25%, 75% { margin: -4px 0 0; -ms-transform: rotate(0deg) skew(-32deg,-44deg); }
}
@-ms-keyframes hb10 {
        0%, 50%, 100% { -ms-transform: rotate(-1deg) skew(-4deg,-24deg); }
        25%, 75% { -ms-transform: rotate(2deg) skew(-4deg,-24deg); }
}
@-ms-keyframes hb11 {
        0%, 50%, 100% { -ms-transform: rotate(77deg) skew(32deg,32deg); }
        25%, 75% { -ms-transform: rotate(80deg) skew(32deg,32deg); }
}
@-ms-keyframes hb12 {
        0%, 50%, 100% { -ms-transform: rotate(2deg) skew(-27deg,-45deg); }
        25%, 75% { -ms-transform: rotate(0.5deg) skew(-27deg,-45deg); }
}
@-ms-keyframes hb13 {
        0%, 50%, 100% { -ms-transform: rotate(2deg) skew(5deg,-55deg); }
        25%, 75% { -ms-transform: rotate(-1deg) skew(5deg,-55deg); }
}
@-ms-keyframes hb14 {
        0%, 50%, 100% { -ms-transform: rotate(2deg) skew(25deg,-65deg); }
        25%, 75% { -ms-transform: rotate(-1deg) skew(25deg,-65deg); }
}
@-ms-keyframes hb15 {
        0%, 50%, 100% { margin: 0; }
        25%, 75% { margin: 0 0 0 -2px; }
}
@-ms-keyframes hf6 {
        0%, 50%, 100% { margin: 0; -ms-transform: rotate(-5deg) skew(-30deg,-32deg); }
        25%, 75% { margin: -7px 0 0; -ms-transform: rotate(-3deg) skew(-30deg,-32deg); }
}
@-ms-keyframes hf7 {
        0%, 50%, 100% { margin: 0 0 0 0; -ms-transform: rotate(67.5deg) skew(42deg,42deg); }
        25%, 75% { margin: -1px 0 0 1px; -ms-transform: rotate(68.5deg) skew(42deg,42deg); }
}
@-ms-keyframes hf8 {
        0%, 50%, 100% { -ms-transform: rotate(63.5deg) skew(37deg,37deg); }
        25%, 75% { -ms-transform: rotate(64.5deg) skew(37deg,37deg); }
}
@-ms-keyframes hf9 {
        0%, 50%, 100% { -ms-transform: rotate(12.5deg) skew(-2deg,-2deg); }
        25%, 75% { -ms-transform: rotate(13.5deg) skew(-2deg,-2deg); }
}
@-ms-keyframes hf10 {
        0%, 50%, 100% { -ms-transform: rotate(37.5deg) skew(-2deg,-2deg); }
        25%, 75% { -ms-transform: rotate(38.5deg) skew(-2deg,-2deg); }
}

@-ms-keyframes hf11 {
        0%, 50%, 100% { margin-top: 0; -ms-transform: rotate(31.5deg) skew(0,15deg); }
        25%, 75% { margin-top: -2px; -ms-transform: rotate(32.5deg) skew(0,15deg); }
}

@-ms-keyframes hf12 {
        0%, 50%, 100% { margin: -1px 0 0 0; -ms-transform: rotate(41.5deg); }
        25%, 75% { margin: -3px 0 0 -1px; -ms-transform: rotate(42.5deg); }
}

@-ms-keyframes hf13 {
        0%, 50%, 100% { -ms-transform: rotate(82.5deg) skew(39deg,39deg); }
        25%, 75% { -ms-transform: rotate(83.5deg) skew(39deg,39deg); }
}

@-ms-keyframes hf14 {
        0%, 50%, 100% { -ms-transform: rotate(38.5deg); }
        25%, 75% { -ms-transform: rotate(39.5deg); }
}

@-ms-keyframes hf15 {
        0%, 50%, 100% { -ms-transform: rotate(39.5deg); }
        25%, 75% { -ms-transform: rotate(40.5deg); }
}

@-ms-keyframes hf18 {
        0%, 50%, 100% { -ms-transform: rotate(78.5deg) skew(39deg,39deg); }
        25%, 75% { -ms-transform: rotate(79.5deg) skew(39deg,39deg); }
}

@-ms-keyframes hf19 {
        0%, 50%, 100% { -ms-transform: rotate(27.5deg); }
        25%, 75% { -ms-transform: rotate(28.5deg); }
}

@-ms-keyframes hf20 {
        0%, 50%, 100% { margin: 0; -ms-transform: rotate(74.5deg) skew(38deg,38deg); }
        25%, 75% { margin: 0 0 0 -1px; -ms-transform: rotate(75.5deg) skew(38deg,38deg); }
}

@-ms-keyframes hf21 {
        0%, 50%, 100% { margin: 0; -ms-transform: rotate(20.5deg) skew(3deg,3deg); }
        25%, 75% { margin: 0 0 0 -1px; -ms-transform: rotate(21.5deg) skew(3deg,3deg); }
}

@-ms-keyframes hf22 {
        0%, 50%, 100% { -ms-transform: rotate(31.5deg); }
        25%, 75% { -ms-transform: rotate(32.5deg); }
}

@-ms-keyframes hf23 {
        0%, 50%, 100% { -ms-transform: rotate(15.5deg); }
        25%, 75% { -ms-transform: rotate(16.5deg); }
}

@-ms-keyframes hf24 {
        0%, 50%, 100% { margin: -1px 0 0 0; -ms-transform: rotate(15.5deg); }
        25%, 75% { margin: -1px 0 0 -1px; -ms-transform: rotate(16.5deg); }
}

@-ms-keyframes hf25 {
        0%, 50%, 100% { -ms-transform: rotate(10.5deg) skew(12deg,12deg); }
        25%, 75% { -ms-transform: rotate(11.5deg) skew(12deg,12deg); }
}

@-ms-keyframes hf26 {
        0%, 50%, 100% { -ms-transform: rotate(59.5deg) skew(37deg,37deg); }
        25%, 75% { -ms-transform: rotate(60.5deg) skew(37deg,37deg); }
}

@-ms-keyframes hf27 {
        0%, 50%, 100% { -ms-transform: rotate(29.5deg); }
        25%, 75% { -ms-transform: rotate(30.5deg); }
}

@-ms-keyframes hf28 {
        0%, 50%, 100% { -ms-transform: rotate(28.5deg); }
        25%, 75% { -ms-transform: rotate(29.5deg); }
}

@-ms-keyframes hf29 {
        0%, 50%, 100% { -ms-transform: rotate(32.5deg); }
        25%, 75% { -ms-transform: rotate(33.5deg); }
}

@-ms-keyframes hf30 {
        0%, 50%, 100% { -ms-transform: rotate(91.5deg) skew(30deg,30deg); }
        25%, 75% { -ms-transform: rotate(92.5deg) skew(30deg,30deg); }
}

@-ms-keyframes hf31 {
        0%, 50%, 100% { -ms-transform: rotate(94.5deg) skew(30deg,30deg); }
        25%, 75% { -ms-transform: rotate(95.5deg) skew(30deg,30deg); }
}

@-ms-keyframes hf32 {
        0%, 50%, 100% { -ms-transform: rotate(34.5deg); }
        25%, 75% { -ms-transform: rotate(35.5deg); }
}
@-ms-keyframes light8 {
        0%, 50%, 100% { -ms-transform: rotate(45.5deg); }
        25%, 75% { -ms-transform: rotate(50.5deg); }
}
@-ms-keyframes light9 {
        0%, 50%, 100% { -ms-transform: rotate(1deg) skew(-30deg,-43deg); }
        25%, 75% { -ms-transform: rotate(-2deg) skew(-30deg,-43deg); }
}
@-ms-keyframes light11 {
        0%, 50%, 100% { -ms-transform: rotate(-0.5deg) skew(-18deg,-45deg); }
        25%, 75% {  -ms-transform: rotate(0.5deg) skew(-18deg,-45deg); }
}

@-moz-keyframes hb1 {
        0%, 50%, 100% { margin: 0; -moz-transform: rotate(-0.5deg) skew(-39deg,-39deg); }
        25%, 75% { margin: -3px 0 0; -moz-transform: rotate(0.5deg) skew(-39deg,-39deg); }
}
@-moz-keyframes hb5 {
        0%, 50%, 100% { margin: -2px 0 0; -moz-transform: rotate(-0.5deg) skew(-32deg,-44deg); }
        25%, 75% { margin: -4px 0 0; -moz-transform: rotate(0deg) skew(-32deg,-44deg); }
}
@-moz-keyframes hb10 {
        0%, 50%, 100% { -moz-transform: rotate(-1deg) skew(-4deg,-24deg); }
        25%, 75% { -moz-transform: rotate(2deg) skew(-4deg,-24deg); }
}
@-moz-keyframes hb11 {
        0%, 50%, 100% { -moz-transform: rotate(77deg) skew(32deg,32deg); }
        25%, 75% { -moz-transform: rotate(80deg) skew(32deg,32deg); }
}
@-moz-keyframes hb12 {
        0%, 50%, 100% { -moz-transform: rotate(2deg) skew(-27deg,-45deg); }
        25%, 75% { -moz-transform: rotate(0.5deg) skew(-27deg,-45deg); }
}
@-moz-keyframes hb13 {
        0%, 50%, 100% { -moz-transform: rotate(2deg) skew(5deg,-55deg); }
        25%, 75% { -moz-transform: rotate(-1deg) skew(5deg,-55deg); }
}
@-moz-keyframes hb14 {
        0%, 50%, 100% { -moz-transform: rotate(2deg) skew(25deg,-65deg); }
        25%, 75% { -moz-transform: rotate(-1deg) skew(25deg,-65deg); }
}
@-moz-keyframes hb15 {
        0%, 50%, 100% { margin: 0; }
        25%, 75% { margin: 0 0 0 -2px; }
}
@-moz-keyframes hf6 {
        0%, 50%, 100% { margin: 0; -moz-transform: rotate(-5deg) skew(-30deg,-32deg); }
        25%, 75% { margin: -7px 0 0; -moz-transform: rotate(-3deg) skew(-30deg,-32deg); }
}
@-moz-keyframes hf7 {
        0%, 50%, 100% { margin: 0 0 0 0; -moz-transform: rotate(67.5deg) skew(42deg,42deg); }
        25%, 75% { margin: -1px 0 0 1px; -moz-transform: rotate(68.5deg) skew(42deg,42deg); }
}
@-moz-keyframes hf8 {
        0%, 50%, 100% { -moz-transform: rotate(63.5deg) skew(37deg,37deg); }
        25%, 75% { -moz-transform: rotate(64.5deg) skew(37deg,37deg); }
}
@-moz-keyframes hf9 {
        0%, 50%, 100% { -moz-transform: rotate(12.5deg) skew(-2deg,-2deg); }
        25%, 75% { -moz-transform: rotate(13.5deg) skew(-2deg,-2deg); }
}
@-moz-keyframes hf10 {
        0%, 50%, 100% { -moz-transform: rotate(37.5deg) skew(-2deg,-2deg); }
        25%, 75% { -moz-transform: rotate(38.5deg) skew(-2deg,-2deg); }
}

@-moz-keyframes hf11 {
        0%, 50%, 100% { margin-top: 0; -moz-transform: rotate(31.5deg) skew(0,15deg); }
        25%, 75% { margin-top: -2px; -moz-transform: rotate(32.5deg) skew(0,15deg); }
}

@-moz-keyframes hf12 {
        0%, 50%, 100% { margin: -1px 0 0 0; -moz-transform: rotate(41.5deg); }
        25%, 75% { margin: -3px 0 0 -1px; -moz-transform: rotate(42.5deg); }
}

@-moz-keyframes hf13 {
        0%, 50%, 100% { -moz-transform: rotate(82.5deg) skew(39deg,39deg); }
        25%, 75% { -moz-transform: rotate(83.5deg) skew(39deg,39deg); }
}

@-moz-keyframes hf14 {
        0%, 50%, 100% { -moz-transform: rotate(38.5deg); }
        25%, 75% { -moz-transform: rotate(39.5deg); }
}

@-moz-keyframes hf15 {
        0%, 50%, 100% { -moz-transform: rotate(39.5deg); }
        25%, 75% { -moz-transform: rotate(40.5deg); }
}

@-moz-keyframes hf18 {
        0%, 50%, 100% { -moz-transform: rotate(78.5deg) skew(39deg,39deg); }
        25%, 75% { -moz-transform: rotate(79.5deg) skew(39deg,39deg); }
}

@-moz-keyframes hf19 {
        0%, 50%, 100% { -moz-transform: rotate(27.5deg); }
        25%, 75% { -moz-transform: rotate(28.5deg); }
}

@-moz-keyframes hf20 {
        0%, 50%, 100% { margin: 0; -moz-transform: rotate(74.5deg) skew(38deg,38deg); }
        25%, 75% { margin: 0 0 0 -1px; -moz-transform: rotate(75.5deg) skew(38deg,38deg); }
}

@-moz-keyframes hf21 {
        0%, 50%, 100% { margin: 0; -moz-transform: rotate(20.5deg) skew(3deg,3deg); }
        25%, 75% { margin: 0 0 0 -1px; -moz-transform: rotate(21.5deg) skew(3deg,3deg); }
}

@-moz-keyframes hf22 {
        0%, 50%, 100% { -moz-transform: rotate(31.5deg); }
        25%, 75% { -moz-transform: rotate(32.5deg); }
}

@-moz-keyframes hf23 {
        0%, 50%, 100% { -moz-transform: rotate(15.5deg); }
        25%, 75% { -moz-transform: rotate(16.5deg); }
}

@-moz-keyframes hf24 {
        0%, 50%, 100% { margin: -1px 0 0 0; -moz-transform: rotate(15.5deg); }
        25%, 75% { margin: -1px 0 0 -1px; -moz-transform: rotate(16.5deg); }
}

@-moz-keyframes hf25 {
        0%, 50%, 100% { -moz-transform: rotate(10.5deg) skew(12deg,12deg); }
        25%, 75% { -moz-transform: rotate(11.5deg) skew(12deg,12deg); }
}

@-moz-keyframes hf26 {
        0%, 50%, 100% { -moz-transform: rotate(59.5deg) skew(37deg,37deg); }
        25%, 75% { -moz-transform: rotate(60.5deg) skew(37deg,37deg); }
}

@-moz-keyframes hf27 {
        0%, 50%, 100% { -moz-transform: rotate(29.5deg); }
        25%, 75% { -moz-transform: rotate(30.5deg); }
}

@-moz-keyframes hf28 {
        0%, 50%, 100% { -moz-transform: rotate(28.5deg); }
        25%, 75% { -moz-transform: rotate(29.5deg); }
}

@-moz-keyframes hf29 {
        0%, 50%, 100% { -moz-transform: rotate(32.5deg); }
        25%, 75% { -moz-transform: rotate(33.5deg); }
}

@-moz-keyframes hf30 {
        0%, 50%, 100% { -moz-transform: rotate(91.5deg) skew(30deg,30deg); }
        25%, 75% { -moz-transform: rotate(92.5deg) skew(30deg,30deg); }
}

@-moz-keyframes hf31 {
        0%, 50%, 100% { -moz-transform: rotate(94.5deg) skew(30deg,30deg); }
        25%, 75% { -moz-transform: rotate(95.5deg) skew(30deg,30deg); }
}

@-moz-keyframes hf32 {
        0%, 50%, 100% { -moz-transform: rotate(34.5deg); }
        25%, 75% { -moz-transform: rotate(35.5deg); }
}
@-moz-keyframes light8 {
        0%, 50%, 100% { -moz-transform: rotate(45.5deg); }
        25%, 75% { -moz-transform: rotate(50.5deg); }
}
@-moz-keyframes light9 {
        0%, 50%, 100% { -moz-transform: rotate(1deg) skew(-30deg,-43deg); }
        25%, 75% { -moz-transform: rotate(-2deg) skew(-30deg,-43deg); }
}
@-moz-keyframes light11 {
        0%, 50%, 100% { -moz-transform: rotate(-0.5deg) skew(-18deg,-45deg); }
        25%, 75% {  -moz-transform: rotate(0.5deg) skew(-18deg,-45deg); }
}

@-o-keyframes hb1 {
        0%, 50%, 100% { margin: 0; -o-transform: rotate(-0.5deg) skew(-39deg,-39deg); }
        25%, 75% { margin: -3px 0 0; -o-transform: rotate(0.5deg) skew(-39deg,-39deg); }
}
@-o-keyframes hb5 {
        0%, 50%, 100% { margin: -2px 0 0; -o-transform: rotate(-0.5deg) skew(-32deg,-44deg); }
        25%, 75% { margin: -4px 0 0; -o-transform: rotate(0deg) skew(-32deg,-44deg); }
}
@-o-keyframes hb10 {
        0%, 50%, 100% { -o-transform: rotate(-1deg) skew(-4deg,-24deg); }
        25%, 75% { -o-transform: rotate(2deg) skew(-4deg,-24deg); }
}
@-o-keyframes hb11 {
        0%, 50%, 100% { -o-transform: rotate(77deg) skew(32deg,32deg); }
        25%, 75% { -o-transform: rotate(80deg) skew(32deg,32deg); }
}
@-o-keyframes hb12 {
        0%, 50%, 100% { -o-transform: rotate(2deg) skew(-27deg,-45deg); }
        25%, 75% { -o-transform: rotate(0.5deg) skew(-27deg,-45deg); }
}
@-o-keyframes hb13 {
        0%, 50%, 100% { -o-transform: rotate(2deg) skew(5deg,-55deg); }
        25%, 75% { -o-transform: rotate(-1deg) skew(5deg,-55deg); }
}
@-o-keyframes hb14 {
        0%, 50%, 100% { -o-transform: rotate(2deg) skew(25deg,-65deg); }
        25%, 75% { -o-transform: rotate(-1deg) skew(25deg,-65deg); }
}
@-o-keyframes hb15 {
        0%, 50%, 100% { margin: 0; }
        25%, 75% { margin: 0 0 0 -2px; }
}
@-o-keyframes hf6 {
     
喂，不要戳奇怪的地方啦~要戳这里！
回复 支持 反对

使用道具 举报

风音洛洛

该用户从未签到

81

主题

92

好友

2万

积分

第一章

去哪里找比我更懒得

积分
28955
 楼主| 发表于 2012-8-10 10:28:21 | 显示全部楼层

html代码

本帖最后由 风音洛洛 于 2012-8-10 10:30 编辑

[mw_shl_code=html,true]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0021)http://f23ko.com/mio/ -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>純 CSS3 繪製 K-ON! 秋山澪</title>
<link href="./純 CSS3 繪製 K-ON! 秋山澪_files/mio.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="main">
<div id="ins">
        <div id="bg"></div>
        <div class="draw">
                <div id="head"></div>

                <div id="hear_back">
                        <div class="hb1 black"></div>
                        <div class="hb2 black"></div>
                        <div class="hb3"></div>
                        <div class="hb4"></div>
                        <div class="hb5 pink"></div>
                        <div class="hb6 pink"></div>
                        <div class="hb7 pink"></div>
                        <div class="hb8"></div>
                        <div class="hb9 black"></div>
                        <div class="hb10"></div>
                        <div class="hb11 pink"></div>
                        <div class="hb12 pink"></div>
                        <div class="hb13"></div>
                        <div class="hb14 pink"></div>
                        <div class="hb15"></div>
                        <div class="hb16"></div>
                        <div class="hb17 black"></div>
                        <div class="hb18"></div>
                </div>

                <div id="clothes">
                        <div class="cls1"></div>
                        <div class="cls2"></div>
                        <div class="cls3"></div>
                        <div class="cls4"></div>
                        <div class="cls5"></div>
                        <div class="cls6"></div>
                        <div class="cls7"></div>


                        <div class="cls8"></div>
                        <div class="cls9"></div>
                </div>

                <div id="ear">
                        <div class="ear1"></div>
                        <div class="ear2"></div>
                        <div class="ear3 org"></div>
                        <div class="ear4"></div>
                        <div class="ear5 none"></div>
                        <div class="ear6 none"></div>
                        <div class="ear7"></div>
                        <div class="ear8"></div>
                </div>

                <div id="neck"></div>

                <div id="face">
                        <div class="fac1"></div>
                        <div class="fac2"></div>
                        <div class="fac3"></div>
                        <div class="fac4"></div>
                        <div class="fac5"></div>
                        <div class="fac6"></div>
                        <div class="fac7 sha"></div>
                        <div class="fac8 sha"></div>
                        <div class="fac9 sha"></div>
                        <div class="norse1"></div>
                        <div class="norse2"></div>
                        <div class="mouth1"></div>
                        <div class="mouth2"></div>
                        <div class="fac10"></div>
                        <div class="fac11"></div>
                        <div class="fac12 line"></div>
                        <div class="fac13 line"></div>
                        <div class="fac14 line"></div>
                        <div class="fac15 line"></div>
                        <div class="fac16 line"></div>
                </div>

                <div id="eye">
                        <div class="eye1 line"></div>
                        <div class="eye2 line"></div>
                        <div class="eye3 line"></div>
                        <div class="eye4 line"></div>
                        <div class="eye5"></div>
                        <div class="eye6"></div>
                        <div class="eye7"></div>
                        <div class="eye8 gray"></div>
                        <div class="eye9 white"></div>
                        <div class="eye10"></div>
                        <div class="eye11 white anime"></div>
                        <div class="eye12 purple"></div>
                        <div class="eye13 purple"></div>
                        <div class="eye14 white anime"></div>
                        <div class="eye15 line"></div>
                        <div class="eye16 line"></div>
                        <div class="eye17"></div>
                        <div class="eye18"></div>
                        <div class="eye19 gray"></div>
                        <div class="eye20 white"></div>
                        <div class="eye21 line"></div>
                        <div class="eye22"></div>
                        <div class="eye23"></div>
                        <div class="eye24 purple"></div>
                        <div class="eye25"></div>
                        <div class="eye26 white anime"></div>
                        <div class="eye27 white anime"></div>
                        <div class="eye28 purple"></div>
                        <div class="eye29 line"></div>
                        <div class="eye30 line"></div>
                        <div class="eye31 line"></div>
                </div>

                <div id="hair_front">
                        <div class="hf1"></div>
                        <div class="hf2"></div>
                        <div class="hf3"></div>
                        <div class="hf4"></div>
                        <div class="hf5"></div>
                        <div class="hf6"></div>
                        <div class="hf7"></div>
                        <div class="hf8"></div>
                        <div class="hf9"></div>
                        <div class="hf10"></div>
                        <div class="hf11"></div>
                        <div class="hf12"></div>
                        <div class="hf13"></div>
                        <div class="hf14"></div>
                        <div class="hf15"></div>
                        <div class="hf16"><div></div></div>
                        <div class="hf17"></div>
                        <div class="hf18"></div>
                        <div class="hf19"></div>
                        <div class="hf20"></div>
                        <div class="hf21"></div>
                        <div class="hf22"></div>
                        <div class="hf23"></div>
                        <div class="hf24"></div>
                        <div class="hf25"></div>
                        <div class="hf26"></div>
                        <div class="hf27"></div>
                        <div class="hf28"></div>
                        <div class="hf29"></div>
                        <div class="hf30"></div>
                        <div class="hf31"></div>
                        <div class="hf32"></div>
                        <div class="hf33"></div>
                </div>

                <div id="light">
                        <div class="light1"></div>
                        <div class="light2"></div>
                        <div class="light3"></div>
                        <div class="light4"></div>
                        <div class="light5"></div>
                        <div class="light6"></div>
                        <div class="light7"></div>
                        <div class="light8"></div>
                        <div class="light9"></div>
                        <div class="light10"></div>
                        <div class="light11"></div>
                </div>

                <div id="dark">
                        <div class="dark1"></div>
                        <div class="dark2"></div>
                        <div class="dark3"></div>
                        <div class="dark4"></div>
                        <div class="dark5"></div>
                        <div class="dark6"></div>
                        <div class="dark7"></div>
                        <div class="dark8"></div>
                        <div class="dark9"></div>
                </div>
        </div>
</div>

        <div class="copy">純 CSS3 繪製 K-ON! 秋山澪。<br>可支援 Firefox、Chrome、Opera、Safari<br>Copyright 2011 © by <a href="http://rei.idv.tw/">Rei</a>, <a href="http://rei.idv.tw/+">My Google+</a>.</div>
</div>




<div class="sogoutip" style="z-index: 2147483645; visibility: hidden; display: none; "></div><div class="sogoubottom"></div><div id="ext_stophi" style="z-index: 2147483647; "><div class="extnoticebg"></div><div class="extnotice"><h2>关闭提示 <a href="http://f23ko.com/mio/#" title="关闭提示" id="closenotice" class="closenotice">关闭</a></h2><p id="sogouconfirmtxt"></p>  <a id="sogouconfirm" href="http://f23ko.com/mio/#" class="extconfirm">确 认</a> <a id="sogoucancel" href="http://f23ko.com/mio/#" class="extconfirm">取 消</a></div></div><div id="ext_overlay" style="display: none; z-index: 2147483646; " class="ext_overlayBG"></div><iframe class="sogou_sugg_feedbackquan" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; z-index: 2147483645; display: none; background-position: initial initial; background-repeat: initial initial; " frameborder="0" scrolling="no" src="./純 CSS3 繪製 K-ON! 秋山澪_files/yun1.htm"></iframe><script src="./純 CSS3 繪製 K-ON! 秋山澪_files/pv.gif"></script></body><style>.sogou_sugg_feedbackquan {
        position:fixed;
        left:0;
        padding:0;
        margin:0;
        bottom:0;
        width: 100%;
        height: 38px;
}
.sogoutip {
        width:199px;
        height:56px;
        padding:10px 20px 0 15px;
        line-height:18px;
        background:url([img]http://ht.www.sogou.com/images/extsugg/sogoutip.gif[/img]) no-repeat;
        position:fixed;
        font-size:13px;
        bottom:38px;
        left:150px;
        text-align:left;
        color:#000;
}
a.closesogoutip,a.closesogoutip:link,a.closesogoutip:visited,a.closesogoutip:active,a.closesogoutip:hover {
        width:9px;
        height:8px;
        background:url([img]http://ht.www.sogou.com/images/extsugg/sogoutip.gif[/img]) no-repeat left -72px;
        line-height:10em;
        overflow:hidden;
        right:8px;
        top:7px;
        position:absolute;
}
.sogoubottom{
        clear:both;
        height:40px;
        width:100%;
        padding:0;
        margin:0;
        position:relative;
        z-index:-99;
}
.extoptboxbg {
        background:url([img]http://ht.www.sogou.com/images/extsugg/optbox.png[/img]) no-repeat;
        width:144px;
        height:109px;
        position:fixed;
        right:16px;
        bottom:35px;
}
.extoptbox {
        width:127px;
        height:75px;
        position:fixed;
        right:25px;
        bottom:57px;
        line-height:22px;
        font-size:12px;
}
.extoptbox a,.extoptbox a:hover {
        color:#426BBD;
        display:block;
        padding-left:9px;
        text-decoration:none;
        text-align:left;
}
.extoptbox a:hover {
        background-color:#EAF1F5;
}
.extfeedback {
        border-top:1px solid #ccc;
        margin-top:4px;
        padding-top:4px;
}
.extnoticebg {
        margin:0;
        left:0;
        top:0;
        width:418px;
        height:185px;
        background:url([img]http://ht.www.sogou.com/images/extsugg/noticebg.png[/img]) no-repeat;
        position:absolute;
}
.extnotice {
        width:402px;
        height:169px;
        position:absolute;
        left:8px;
        top:8px;
        font-size:14px;
        text-align:center;
        color:#000;
}
.extnotice h2 {
        line-height:29px;
        padding:0 9px;
        font-size:13px;
        text-align:left;
        color:#000;
}
.extnotice p {
        margin:28px 0 33px;
        color:#000;
}
.extconfirm, .extconfirm:hover {
        width:63px;
        height:23px;
        line-height:23px;
        display:inline-block;
        font-weight:bold;
        color:#515F68;
        margin:0 20px;
        background:#D7E5ED;
        filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ECF2F6,endcolorstr=#D7E5ED,gradientType=0);
        background:-webkit-gradient(linear, left top, left bottom, from(#ECF2F6), to(#D7E5ED));
        text-decoration:none;
        border:1px solid #89B4E1;
}
.closenotice {
        width:14px;
        height:14px;
        background:#fff url([img]http://ht.www.sogou.com/images/extsugg/ui2.1.gif[/img]) no-repeat 2px -313px;
        border:1px solid #B1CBE8;
        position:absolute;
        right:7px;
        top:7px;
        overflow:hidden;
        line-height:100em;
}
.closenotice:hover {
        background-position: 2px -338px;
}
#ext_overlay {
        position: fixed;
        z-index:100;
        top: 0px;
        left: 0px;
        height:100%;
        width:100%;
}

.ext_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.ext_overlayBG {
        background-color:#000;
        filter:alpha(opacity=25);
        -moz-opacity: 0.25;
        opacity: 0.25;
}

* html #ext_overlay { /* ie6 hack */
        position: absolute;
        height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#ext_HideSelect{
        z-index:99;
        position:fixed;
        top: 0;
        left: 0;
        background-color:#fff;
        border:none;
        filter:alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0;
        height:100%;
        width:100%;
}

* html #ext_HideSelect { /* ie6 hack */
        position: absolute;
        height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#ext_stophi {
        position: fixed;
        z-index: 102;
        display:none;
        top:50%;
        left:50%;
        width:418px;
        height:185px;
}

* html #ext_stophi { /* ie6 hack */
        position: absolute;
        margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
</style></html>[/mw_shl_code]
喂，不要戳奇怪的地方啦~要戳这里！
回复 支持 反对

使用道具 举报

1Ive1

该用户从未签到

61

主题

501

好友

17万

积分

版主

孤独の观测者

积分
179856
发表于 2012-8-10 10:45:58 | 显示全部楼层
好厉害...
然后代码好长~~
这么有爱一定是男孩子的说|请叫我神主SAMA|
回复 支持 反对

使用道具 举报

蓝宇轩

该用户从未签到

22

主题

19

好友

2922

积分

Continue

积分
2922
发表于 2012-8-10 10:48:38 | 显示全部楼层
是可以的啊;但是会累死的;还要去构思成模块一个一个去实现!累啊
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

蓝宇轩

该用户从未签到

22

主题

19

好友

2922

积分

Continue

积分
2922
发表于 2012-8-10 10:50:09 | 显示全部楼层
这应该是html5,CSS3才有的!
IE6不支持;可恨的IE6啊
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

parkmiki

该用户从未签到

3

主题

8

好友

1366

积分

Continue

积分
1366
发表于 2012-8-10 10:51:18 | 显示全部楼层
我超 好生猛！！！太凶残了·······
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

lz3600

该用户从未签到

3

主题

14

好友

3545

积分

序章

积分
3545
发表于 2012-8-10 10:52:15 | 显示全部楼层
#22！太强大了
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

arition

该用户从未签到

1

主题

10

好友

1689

积分

Continue

积分
1689
发表于 2012-8-10 10:55:26 | 显示全部楼层
我觉得这可以用来测试浏览器性能……
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

荼火

该用户从未签到

4

主题

20

好友

1694

积分

Continue

积分
1694
发表于 2012-8-10 10:56:25 | 显示全部楼层
逆天！
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

只有线稿的渣

该用户从未签到

1

主题

14

好友

756

积分

New Game

积分
756
发表于 2012-8-10 10:57:17 | 显示全部楼层
玩数位板的跪了……
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

彼岸BingZi

该用户从未签到

2

主题

10

好友

3420

积分

序章

积分
3420
发表于 2012-8-10 10:59:27 | 显示全部楼层
=1391=太凶残了！学不来啊！我还是用我的板子吧。。。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

三步页君

该用户从未签到

6

主题

24

好友

3266

积分

序章

积分
3266
发表于 2012-8-10 11:16:58 | 显示全部楼层
给您跪了还不成吗？这。。尼玛啊。。。不是一般的凶残啊。。。。。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

奈ッ心

该用户从未签到

58

主题

229

好友

3万

积分

第二章

积分
36384
发表于 2012-8-10 11:20:39 | 显示全部楼层
碉堡了！！！！！！！！！！！！
[url=http://weibo.com/hinatashuishui]男なら、谁かのために强く
回复 支持 反对

使用道具 举报

寻叔

该用户从未签到

8

主题

26

好友

5976

积分

序章

积分
5976
发表于 2012-8-10 11:51:15 | 显示全部楼层
强大QAQ
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

下一页 »
12345678910... 12下一页
返回列表 发新帖发新帖

本版积分规则

小黑屋|手机版|技术宅(Z站|基宅) ( 粤ICP备18082987号-1 )

GMT+8, 2025-7-11 02:56 , Processed in 0.164803 second(s), 40 queries , Redis On.

Copyright © 2018 技术宅社区

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表