|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
破洛洛文章简介：用CSS3绘制小新.
新浪有两个不祥物，小新是女孩儿，小浪是男孩儿。如今盛行用CSS3画点甚么，我们SINACDC的模特儿，一定是小新和小浪了。
熬一夜做了个小新头，不完美，另有更像的空间。秘诀就是揣摩出用各类圆形，互相迭加而制造出一个物体。先看看最后的效果吧。团体以为，firefox在图型方面的体现是最好的，而safari和chrome固然有毛边，但上风是撑持CSS动画。各有所长。而IE，就当它是打酱油的吧。
此次利用到的CSS3属性包含：
圆角：-moz-border-radius;-webkit-border-radius;
扭转：-moz-transform;-webkit-transform;
暗影：-moz-box-shadow;-webkit-box-shadow;
突变：-moz-linear-gradient;-webkit-gradient;
上面就看一下我用CSS3代码画的小新，在各扫瞄器下的体现：
Firefox3.6.8
Chrome5.0
Safari5.0
IE6、IE7、IE8
完成逻辑很复杂。先画一个长方块儿，用CSS3代码为方块儿加圆角儿、暗影、倾斜、突变光效。做为小新的头。
一个小长方型，做为长圆型，并加暗影
在下面盖一个年夜圆，粉色部位酿成一个弯弯的锥型
在明白圆上，再盖一个加暗影、突变光效的小圆
把暗示头部的年夜圆，盖在暗示头发的拐弯上，再把页面背景致定为红色，让他人看不出遮罩层。小新就长出一根头发了。
将头发复制5份，每根头发，都细调巨细和地位
眼睛就好画多了，先画一个红色的圆型，加灰边、和粉色上暗影
盖一个棕色的圆，加黑边和暗影
再盖两个小白点儿，一语道破
组合起来，就完成了。
完成起来对照费工夫，但并没有难度。必要注重的是position的用法，制造出准确的前后按次。
固然不克不及对比计划师用PS画出来的宛在目前，代码写的小新，娇媚的券发像是一个个细弱的小胳膊。组里有同砚绘制的小游勇，也相称大度，浪的几乎了。不外抱着经心制造的精力，信任你们会比我画的更好。
原码在此：
001<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">002<htmlxmlns="http://www.w3.org/1999/xhtml">003<head>004<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>005<title>小新头像-新浪CDC</title>006</head>007<style>008.sina{margin:60px0022px;}009.head{position:relative;width:195px;height:220px;}010.head_bg{position:absolute;width:200px;height:175px;background:#ab2b41;left:6px;z-index:6;011-moz-border-radius-topleft:200px180px;012-moz-border-radius-topright:200px180px;013-moz-border-radius-bottomleft:200px180px;014-moz-border-radius-bottomright:200px180px;015-webkit-border-radius:200px180px;016-moz-transform:rotate(-6deg);017-webkit-transform:rotate(-6deg);018-moz-box-shadow:1px4px3px#333;019-webkit-box-shadow:1px4px3px#333;020border:1pxsolid#c03461;021}022023.head_top{position:absolute;top:-3px;left:5px;width:197px;height:167px;z-index:7;024-moz-border-radius-topleft:200px180px;025-moz-border-radius-topright:200px180px;026-moz-border-radius-bottomleft:200px180px;027-moz-border-radius-bottomright:200px180px;028-webkit-border-radius:200px180px;029-moz-transform:rotate(-6deg);030-webkit-transform:rotate(-6deg);031background:-moz-linear-gradient(lefttop,#e16591,#ce355150%);032background:-webkit-gradient(linear,00,050%,from(#e16591),to(#ce3551));033}034035.head_shadow{position:absolute;width:190px;height:162px;top:2px;left:10px;z-index:8;036-moz-border-radius-topleft:200px180px;037-moz-border-radius-topright:200px180px;038-moz-border-radius-bottomleft:200px180px;039-moz-border-radius-bottomright:200px180px;040-webkit-border-radius:200px180px;041background:-moz-linear-gradient(lefttop,white,#ce355250%);042background:-webkit-gradient(linear,lefttop,10%50%,from(#fff),to(#ce3552));043}044045.head_a1{width:54px;height:45px;position:absolute;top:-24px;right:32px;background:#d53960;z-index:5;046border:1pxsolid#c03461;047-moz-border-radius:180px0;048-webkit-border-radius:180px0180px0;049-moz-transform:rotate(-6deg);050-webkit-transform:rotate(-6deg);051-moz-box-shadow:4px4px0px#c03461;052-webkit-box-shadow:4px4px0px#c03461;053}054055.head_a1.top{width:100px;height:100px;position:absolute;top:-80px;right:-11px;background:#fff;z-index:1;056-moz-border-radius:135px;057-webkit-border-radius:135px;058}059060.head_a1.body{width:23px;height:23px;position:absolute;top:-10px;right:-3px;background:#d53960;z-index:2;061-moz-border-radius:135px135px135px0;062-webkit-border-top-left-radius:135px;063-webkit-border-top-right-radius:135px;064-webkit-border-bottom-right-radius:135px;065-webkit-border-bottom-left-radius:0;066067-moz-transform:rotate(-60deg);068-webkit-transform:rotate(-60deg);069-moz-box-shadow:3px4px0px#c03461;070-webkit-box-shadow:3px4px0px#c03461;071}072073.head_a1.shadow{width:19px;height:19px;position:absolute;top:-8px;right:-2px;z-index:3;074-moz-border-radius:135px135px135px0;075-webkit-border-radius:135px135px135px0;076-moz-transform:rotate(-60deg);077-webkit-transform:rotate(-60deg);078background:-moz-linear-gradient(top,white,#ce355250%);079background:-webkit-gradient(linear,lefttop,050%,from(#fff),to(#ce3552));080}081082.head_a2{width:60px;height:45px;position:absolute;top:-22px;right:-13px;background:#d53960;z-index:4;083border:1pxsolid#c03461;084-moz-border-radius:180px0;085-webkit-border-radius:180px0180px0;086-moz-transform:rotate(-10deg);087-webkit-transform:rotate(-10deg);088-moz-box-shadow:4px4px0px#c03461;089-webkit-box-shadow:4px4px0px#c03461;090}091092.head_a2.top{width:40px;height:38px;position:absolute;top:-12px;right:7px;background:#fff;z-index:1;093-moz-border-radius:180px0180px0;094-webkit-border-radius:180px0180px0;095-moz-transform:rotate(20deg);096-webkit-transform:rotate(20deg);097}098099.head_a2.body{width:23px;height:23px;position:absolute;top:-10px;right:-3px;background:#d53960;z-index:2;100-moz-border-radius:135px135px135px0;101-webkit-border-radius:135px135px135px0;102-moz-transform:rotate(-60deg);103-webkit-transform:rotate(-60deg);104-moz-box-shadow:3px4px0px#c03461;105-webkit-box-shadow:3px4px0px#c03461;106}107108.head_a2.shadow{width:19px;height:19px;position:absolute;top:-8px;right:-1px;z-index:3;109-moz-border-radius:135px135px135px0;110-webkit-border-radius:135px135px135px0;111-moz-transform:rotate(-60deg);112-webkit-transform:rotate(-60deg);113background:-moz-linear-gradient(top,white,#ce355250%);114background:-webkit-gradient(linear,lefttop,050%,from(#fff),to(#ce3552));115}116117.head_a3{width:80px;height:47px;position:absolute;top:6px;right:-46px;background:#d53960;z-index:3;118border:1pxsolid#c03461;119-moz-border-radius:100px0110px0;120-webkit-border-radius:100px0110px0;121-moz-transform:rotate(-10deg);122-webkit-transform:rotate(-10deg);123-moz-box-shadow:4px4px0px#c03461;124-webkit-box-shadow:4px4px0px#c03461;125}126127.head_a3.top{width:67px;height:38px;position:absolute;top:-18px;right:15px;background:#fff;z-index:1;128-moz-border-radius:180px0180px0;129-webkit-border-radius:180px0180px0;130-moz-transform:rotate(40deg);131-webkit-transform:rotate(40deg);132}133.head_a3.body{width:23px;height:23px;position:absolute;top:-8px;right:-1px;background:#d53960;z-index:2;134-moz-border-radius:135px135px135px0;135-webkit-border-radius:135px135px135px0;136-moz-transform:rotate(-72deg);137-webkit-transform:rotate(-72deg);138-moz-box-shadow:3px4px0px#c03461;139-webkit-box-shadow:3px4px0px#c03461;140}141142.head_a3.shadow{width:19px;height:19px;position:absolute;top:-6px;right:0px;z-index:3;143-moz-border-radius:135px135px135px0;144-webkit-border-radius:135px135px135px0;145-moz-transform:rotate(-60deg);146-webkit-transform:rotate(-60deg);147background:-moz-linear-gradient(top,white,#ce355250%);148background:-webkit-gradient(linear,lefttop,050%,from(#fff),to(#ce3552));149}150151.head_a4{width:80px;height:47px;position:absolute;top:44px;right:-55px;background:#d53960;z-index:2;152border:1pxsolid#c03461;153-moz-border-radius:80px0110px0;154-webkit-border-radius:80px0110px0;155-moz-transform:rotate(8deg);156-webkit-transform:rotate(8deg);157-moz-box-shadow:4px4px0px#c03461;158-webkit-box-shadow:4px4px0px#c03461;159}160161.head_a4.top{width:67px;height:38px;position:absolute;top:-18px;right:13px;background:#fff;z-index:1;162-moz-border-radius:180px0180px0;163-webkit-border-radius:180px0180px0;164-moz-transform:rotate(40deg);165-webkit-transform:rotate(40deg);166}167168.head_a4.body{width:23px;height:23px;position:absolute;top:-9px;right:-2px;background:#d53960;z-index:2;169-moz-border-radius:135px135px135px0;170-webkit-border-radius:135px135px135px0;171-moz-transform:rotate(-70deg);172-webkit-transform:rotate(-70deg);173-moz-box-shadow:3px4px0px#c03461;174-webkit-box-shadow:3px4px0px#c03461;175}176.head_a4.shadow{width:19px;height:19px;position:absolute;top:-7px;right:-1px;z-index:3;177-moz-border-radius:135px135px135px0;178-webkit-border-radius:135px135px135px0;179-moz-transform:rotate(-70deg);180-webkit-transform:rotate(-70deg);181background:-moz-linear-gradient(top,white,#ce355250%);182background:-webkit-gradient(linear,lefttop,050%,from(#fff),to(#ce3552));183}184185.head_a5{width:54px;height:45px;position:absolute;top:87px;right:-45px;background:#d53960;z-index:1;186border:1pxsolid#c03461;187-moz-border-radius:135px0180px0;188-webkit-border-radius:135px0180px0;189-moz-transform:rotate(35deg);190-webkit-transform:rotate(35deg);191-moz-box-shadow:4px4px0px#c03461;192-webkit-box-shadow:4px4px0px#c03461;193}194.head_a5.top{width:100px;height:100px;position:absolute;top:-78px;right:-7px;background:#fff;z-index:1;195-moz-border-radius:135px;196-webkit-border-radius:135px;197}198.head_a5.body{width:23px;height:23px;position:absolute;top:-6px;right:0px;background:#d53960;z-index:2;199-moz-border-radius:135px135px135px0;200-webkit-border-radius:135px;201-moz-transform:rotate(-70deg);202-webkit-transform:rotate(-70deg);203-moz-box-shadow:3px4px0px#c03461;204-webkit-box-shadow:3px4px0px#c03461;205}206.head_a5.shadow{width:19px;height:19px;position:absolute;top:-4px;right:2px;z-index:3;207-moz-border-radius:135px135px135px0;208-webkit-border-radius:135px135px135px0;209-moz-transform:rotate(-70deg);210-webkit-transform:rotate(-70deg);211background:-moz-linear-gradient(top,white,#ce355250%);212background:-webkit-gradient(linear,lefttop,050%,from(#fff),to(#ce3552));213}214215.eye{position:absolute;top:47px;left:27px;width:161px;height:88px;z-index:10;216-moz-transform:rotate(-2deg);217-webkit-transform:rotate(-2deg);218}219220.eye1{position:absolute;top:57px;left:59px;width:8px;height:8px;background:#fff;z-index:5;221-moz-border-radius:180px;222-webkit-border-radius:180px;223}224.eye2{position:absolute;top:29px;left:81px;width:22px;height:22px;background:#fff;z-index:4;225-moz-border-radius:180px;226-webkit-border-radius:180px;227}228.eye3{position:absolute;top:25px;left:56px;width:47px;height:47px;background:#000;z-index:3;229-moz-border-radius:180px;230-webkit-border-radius:180px;231}232.eye4{position:absolute;top:14px;left:46px;width:67px;height:67px;border:1pxsolid#312613;background:#66383d;z-index:2;233-moz-border-radius:180px;234-webkit-border-radius:180px;235-moz-box-shadow:0px0px5px#000;236-webkit-box-shadow:0px0px5px#000;237}238.eye5{position:absolute;top:1px;left:8px;width:137px;height:86px;background:#fff;z-index:1;239border-top:5pxsolid#999;border-left:5pxsolid#999;240-moz-border-radius:300px30px300px30px;241-webkit-border-radius:300px30px300px30px;242-moz-transform:rotate(20deg);243-webkit-transform:rotate(20deg);244-moz-box-shadow:0px-7px0#ec9dc2;245-webkit-box-shadow:0px-7px0#ec9dc2;}246247</style>248249<body>250<divclass="sina">251<divclass="head">252<divclass="head_bg"></div>253<divclass="head_top"></div>254<divclass="head_shadow"></div>255256<divclass="head_a1">257<divclass="top"></div>258<divclass="body"></div>259<divclass="shadow"></div>260</div>261<divclass="head_a2">262<divclass="top"></div>263<divclass="body"></div>264<divclass="shadow"></div>265</div>266<divclass="head_a3">267<divclass="top"></div>268<divclass="body"></div>269<divclass="shadow"></div>270</div>271<divclass="head_a4">272<divclass="top"></div>273<divclass="body"></div>274<divclass="shadow"></div>275</div>276<divclass="head_a5">277<divclass="top"></div>278<divclass="body"></div>279<divclass="shadow"></div>280</div>281282<divclass="eye">283<divclass="eye1"></div>284<divclass="eye2"></div>285<divclass="eye3"></div>286<divclass="eye4"></div>287<divclass="eye5"></div>288</div>289290</div>291292</div>293</body>294</html></p>
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:12:07
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜