泰拉瑞亚第二弹
依旧先上对比图
原图地址
html结构
1 2 3 4 5 6 7 8 9 10 11 12
| <div class="pixie-wrapper"> <div class="pixie-body"> <div class="pixie-light-1"> <div class="pixie-light-2"> <div class="pixie-center1"></div> </div> </div> </div> <div class="pixie-wing1"></div> <div class="pixie-wing2"></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 96 97 98 99 100 101 102
| .pixie-wrapper { width: 162px; height: 107px; background: #fff; position: absolute; top: 50%; left: 50%; margin-top: -53px; margin-left: -81px; } .pixie-body { width: 100px; height: 100px; border: 5px solid #53410a; border-radius: 50%; background: #532f19; padding: 5px; } .pixie-light-1 { background: #fd8f4d; border: 5px solid #fff; border-radius: 50%; position: absolute; width: 80px; height: 80px; padding: 5px; z-index: 2; } .pixie-light-2 { background: #fedd7c; border: 5px solid #fdc621; border-radius: 50%; position: absolute; width: 60px; height: 60px; padding: 5px; } .pixie-center { width: 60px; height: 20px; position: absolute; background: #fffaeb; top: 50%; margin-top: -10px; } .pixie-center::after { content: ''; width:20px; height: 20px; position: absolute; background: #fffaeb; left: 50%; top: 20px; margin-left: -10px; } .pixie-center::before { content: ''; width:20px; height: 20px; position: absolute; background: #fffaeb; left: 50%; top: -20px; margin-left: -10px; } .pixie-center1 { width: 50px; height: 50px; background: #fffaeb; position: absolute; border-radius: 50%; top: 50%; margin-top: -25px; left: 50%; margin-left: -25px; } .pixie-wing1 { position: absolute; right: -7px; top: 26px; width: 80px; height: 25px; border-radius: 80% 50% 50% 40%; background-color: #a7b6cd; border: 2px solid #313131; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); z-index: 1; } .pixie-wing2 { position: absolute; right: 16px; top: 20px; width: 60px; height: 25px; border-radius: 80% 50% 50% 40%; background-color: #a7b6cd; border: 2px solid #313131; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); z-index: 0; }
|
翅膀的角度觉得很奇怪,中心原本放大是十字型,考虑这个是像素块,里面还是放圆形看着舒服点。