[关闭]
@xunuo 2020-05-09T16:58:50.000000Z 字数 3255 阅读 600

css制作图形

前端


  1. <style>
  2. .heart {
  3. position: absolute;
  4. margin: auto;
  5. top: 0;
  6. right: 0;
  7. bottom: 0;
  8. left: 0;
  9. background-color: pink;
  10. height: 50px;
  11. width: 50px;
  12. transform: rotate(-45deg);
  13. }
  14. .heart:after {
  15. background-color: pink;
  16. content: "";
  17. border-radius: 50%;
  18. position: absolute;
  19. width: 50px;
  20. height: 50px;
  21. top: 0px;
  22. left: 25px;
  23. }
  24. .heart:before {
  25. content: "";
  26. background-color: pink;
  27. border-radius: 50%;
  28. position: absolute;
  29. width: 50px;
  30. height: 50px;
  31. top: -25px;
  32. left: 0px;
  33. }
  34. </style>
  35. <div class = "heart"></div>
  1. <style>
  2. .center
  3. {
  4. position: absolute;
  5. margin: auto;
  6. top: 0;
  7. right: 0;
  8. bottom: 0;
  9. left: 0;
  10. width: 100px;
  11. height: 100px;
  12. background-color: transparent;
  13. border-radius: 50%;
  14. box-shadow: 25px 10px 0 0 yellow;
  15. }
  16. </style>
  17. <div class="center"></div>
  1. <style>
  2. .penguin {
  3. /* change code below */
  4. --penguin-skin: gray;
  5. --penguin-belly: white;
  6. --penguin-beak: orange;
  7. /* change code above */
  8. position: relative;
  9. margin: auto;
  10. display: block;
  11. margin-top: 5%;
  12. width: 300px;
  13. height: 300px;
  14. }
  15. .penguin-top {
  16. top: 10%;
  17. left: 25%;
  18. background: var(--penguin-skin, gray);
  19. width: 50%;
  20. height: 45%;
  21. border-radius: 70% 70% 60% 60%;
  22. }
  23. .penguin-bottom {
  24. top: 40%;
  25. left: 23.5%;
  26. background: var(--penguin-skin, gray);
  27. width: 53%;
  28. height: 45%;
  29. border-radius: 70% 70% 100% 100%;
  30. }
  31. .right-hand {
  32. top: 0%;
  33. left: -5%;
  34. background: var(--penguin-skin, gray);
  35. width: 30%;
  36. height: 60%;
  37. border-radius: 30% 30% 120% 30%;
  38. transform: rotate(45deg);
  39. z-index: -1;
  40. }
  41. .left-hand {
  42. top: 0%;
  43. left: 75%;
  44. background: var(--penguin-skin, gray);
  45. width: 30%;
  46. height: 60%;
  47. border-radius: 30% 30% 30% 120%;
  48. transform: rotate(-45deg);
  49. z-index: -1;
  50. }
  51. .right-cheek {
  52. top: 15%;
  53. left: 35%;
  54. background: var(--penguin-belly, white);
  55. width: 60%;
  56. height: 70%;
  57. border-radius: 70% 70% 60% 60%;
  58. }
  59. .left-cheek {
  60. top: 15%;
  61. left: 5%;
  62. background: var(--penguin-belly, white);
  63. width: 60%;
  64. height: 70%;
  65. border-radius: 70% 70% 60% 60%;
  66. }
  67. .belly {
  68. top: 60%;
  69. left: 2.5%;
  70. background: var(--penguin-belly, white);
  71. width: 95%;
  72. height: 100%;
  73. border-radius: 120% 120% 100% 100%;
  74. }
  75. .right-feet {
  76. top: 85%;
  77. left: 60%;
  78. background: var(--penguin-beak, orange);
  79. width: 15%;
  80. height: 30%;
  81. border-radius: 50% 50% 50% 50%;
  82. transform: rotate(-80deg);
  83. z-index: -2222;
  84. }
  85. .left-feet {
  86. top: 85%;
  87. left: 25%;
  88. background: var(--penguin-beak, orange);
  89. width: 15%;
  90. height: 30%;
  91. border-radius: 50% 50% 50% 50%;
  92. transform: rotate(80deg);
  93. z-index: -2222;
  94. }
  95. .right-eye {
  96. top: 45%;
  97. left: 60%;
  98. background: black;
  99. width: 15%;
  100. height: 17%;
  101. border-radius: 50%;
  102. }
  103. .left-eye {
  104. top: 45%;
  105. left: 25%;
  106. background: black;
  107. width: 15%;
  108. height: 17%;
  109. border-radius: 50%;
  110. }
  111. .sparkle {
  112. top: 25%;
  113. left: 15%;
  114. background: white;
  115. width: 35%;
  116. height: 35%;
  117. border-radius: 50%;
  118. }
  119. .blush-right {
  120. top: 65%;
  121. left: 15%;
  122. background: pink;
  123. width: 15%;
  124. height: 10%;
  125. border-radius: 50%;
  126. }
  127. .blush-left {
  128. top: 65%;
  129. left: 70%;
  130. background: pink;
  131. width: 15%;
  132. height: 10%;
  133. border-radius: 50%;
  134. }
  135. .beak-top {
  136. top: 60%;
  137. left: 40%;
  138. background: var(--penguin-beak, orange);
  139. width: 20%;
  140. height: 10%;
  141. border-radius: 50%;
  142. }
  143. .beak-bottom {
  144. top: 65%;
  145. left: 42%;
  146. background: var(--penguin-beak, orange);
  147. width: 16%;
  148. height: 10%;
  149. border-radius: 50%;
  150. }
  151. body {
  152. background:#c6faf1;
  153. }
  154. .penguin * {
  155. position: absolute;
  156. }
  157. </style>
  158. <div class="penguin">
  159. <div class="penguin-bottom">
  160. <div class="right-hand"></div>
  161. <div class="left-hand"></div>
  162. <div class="right-feet"></div>
  163. <div class="left-feet"></div>
  164. </div>
  165. <div class="penguin-top">
  166. <div class="right-cheek"></div>
  167. <div class="left-cheek"></div>
  168. <div class="belly"></div>
  169. <div class="right-eye">
  170. <div class="sparkle"></div>
  171. </div>
  172. <div class="left-eye">
  173. <div class="sparkle"></div>
  174. </div>
  175. <div class="blush-right"></div>
  176. <div class="blush-left"></div>
  177. <div class="beak-top"></div>
  178. <div class="beak-bottom"></div>
  179. </div>
  180. </div>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注