这次是滑稽,眼窝不太满意,还有不能自适应,下次研究一下自适应。这个算第一版。会不会有第二版,看我无不无聊吧。
原图![Image text](http://wx3.sinaimg.cn/mw690/612f00a6gy1fhpb1kz93pj21kw1kw0tv.jpg)
这次不上对比图,因为终于学会线上代码了orz、
线上地址
dom结构
1 2 3 4 5 6 7 8 9 10 11 12 13
| <div class="huaji-wrapper"> <div class="huaji-eyebrow-wrapper"> <div class="huaji-eyebrow-l"></div> <div class="huaji-eyebrow-r"></div> </div> <div class="huaji-eye eye-l"></div> <div class="huaji-eye eye-r"></div> <div class="huaji-pupil pupil-l"></div> <div class="huaji-pupil pupil-r"></div> <div class="huaji-face face-l"></div> <div class="huaji-face face-r"></div> <div class="huaji-mouth"></div> </div>
|
css部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
| .huaji-wrapper { width: 584px; height: 584px; background: #fec767; position: absolute; top: 50%; left: 50%; margin-top: -292px; margin-left: -292px; border-radius: 50%; z-index: 1; } .huaji-eyebrow-l,.huaji-eyebrow-r { width: 150px; height: 150px; border-radius: 50%; box-shadow: 20px 20px 0 0 #725c33; position: absolute; top: 60px; z-index: 2; } .huaji-eyebrow-l { left: 20px; -webkit-transform:rotate(-120deg); -moz-transform:rotate(-120deg); } .huaji-eyebrow-r { right: 20px; -webkit-transform:rotate(205deg); -moz-transform:rotate(205deg); } .huaji-eyebrow-wrapper { position: absolute; top: 0; height: 120px; width: 100%; overflow: hidden; } .huaji-mouth { width: 450px; height: 450px; border-radius: 50%; box-shadow: 10px 10px 0 0 #c47e1f; position: absolute; bottom: 80px; left: 50%; margin-left: -225px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); } .huaji-face { width: 120px; height: 54px; border-radius: 50%; background: #f5a865; position: absolute; bottom: 300px; } .face-l { left: 38px; } .face-r { right: 38px; } .huaji-pupil { width: 50px; height: 50px; border-radius: 50%; background: #8c6c3d; position: absolute; z-index: 3; bottom: 380px; } .pupil-l { left: 30px; } .pupil-r { right: 180px; } .huaji-eye { width: 250px; height: 70px; bottom: 318px; position: absolute; border-radius: 100%; box-shadow: #f7e9c7 0 32px 0 20px; -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); } .eye-l { left: 0; } .eye-r { right: 0; }
|