用html和css制作小黄人,微信小程序相关css写小黄人(示例代码)

1 /*

2 * @Author: ÐéÖñ3 * @Date: 2017-06-04 15:36:244 * @Last Modified by: 虚竹5 * @Last Modified time: 2017-06-04 20:48:446 */

7 *{margin:0;padding:0;}

8

9 .wrapper{

10 width:300px;

11 margin:50px auto;

12 position:relative;

13 }

14 /*小黄人身体容器*/

15 .bodyH{

16 width:240px;

17 height:400px;

18 border:5px solid black;

19 border-radius:115px;

20 background:rgb(249, 217, 70);

21 position:relative;

22 /*溢出*/

23 overflow:hidden;

24 }

25 /*裤子*/

26 .kuzi-bottom{

27 height:100px;

28 width:100%;

29 position:absolute;

30 background:#2074A0;

31 bottom:0;

32 border-top:5px solid black;

33 }

34

35 .kuzi-top{

36 height:60px;

37 width:65%;

38 background:#2074A0;

39 position:absolute;

40 bottom:100px;

41 left:0px;

42 right:0px;

43 margin:auto;

44 border:5px solid black;

45 border-bottom:none;

46 }

47

48 /*裤子下面的线条*/

49 .left-line{

50 width:30px;

51 height:30px;

52 position:absolute;

53 bottom:60px;

54 left:5px;

55 /*1旋转*/

56 transform:rotate(10deg);

57 /*2设置边框*/

58 border-right:5px solid black;

59 border-bottom:5px solid black;

60 /*3弧度*/

61 border-radius:0px 0px 60px 0px;

62 }

63 .right-line{

64 width:30px;

65 height:30px;

66 position:absolute;

67 bottom:60px;

68 right:5px;

69 transform:rotate(-10deg);

70 border-left:5px solid black;

71 border-bottom:5px solid black;

72 border-radius:0px 0px 0px 60px;

73 }

74

75 .middle-line{

76 width:5px;

77 height:40px;

78 background:black;

79 position:absolute;

80 left:0;

81 right:0;

82 margin:auto;

83 bottom:0px;

84 border-radius:2px;

85 }

86

87 /*裤子上的小口袋*/

88 .koudai{

89 width:60px;

90 height:40px;

91 border:5px solid black;

92 border-radius:0px 0px 25px 25px;

93 position:absolute;

94 bottom:65px;

95 left:0px;

96 right:0px;

97 margin:auto;

98 }

99

100 /*左右背带*/

101 .left-beidai{

102 width:120px;

103 height:16px;

104 border:5px solid black;

105 /*进行了旋转*/

106 transform:rotate(45deg);

107 position:absolute;

108 left:-50px;

109 bottom:170px;

110 background:#2074A0;

111 }

112 /*背带上面的小按扣*/

113 .left-beidai::after{

114 content:\'\';

115 width:10px;

116 height:10px;

117 display:block;

118 border-radius:50%;

119 background:black;

120 position:absolute;

121 right:5px;

122 top:0px;

123 bottom:0px;

124 margin:auto;

125 }

126 .right-beidai{

127 width:120px;

128 height:16px;

129 border:5px solid black;

130 /*进行了旋转*/

131 transform:rotate(-45deg);

132 position:absolute;

133 right:-50px;

134 bottom:170px;

135 background:#2074A0;

136 }

137 .right-beidai::after{

138 content:\'\';

139 width:10px;

140 height:10px;

141 display:block;

142 border-radius:50%;

143 background:black;

144 position:absolute;

145 left:5px;

146 top:0px;

147 bottom:0px;

148 margin:auto;

149 }

150

151 /*开始脚*/

152 /*把脚分成了两部分，这是脚竖着的部分*/

153 .left-foot{

154 width:40px;

155 height:60px;

156 background:black;

157 position:absolute;

158 bottom:-30px;

159 left:75px;

160 z-index:-1;

161 border-radius:0px 0px 5px 0px;

162 /*

163 leftfoot: 动画的名称;164 0.8s: 完成这一个动画所需要的时间;165 ease-in-out: 非匀速运动;166 infinite: 无限循环;167 */

168 animation:leftfoot 0.8s ease-in-out infinite;

169 /*设置旋转元素的基点位置*/

170 transform-origin:right top;

171 }

172 /*脚横着的部分*/

173 .left-foot::after{

174 content:\'\';

175 display:block;

176 width:40px;

177 height:30px;

178 background:black;

179 position:absolute;

180 bottom:-0px;

181 left:-30px;

182 border-radius:30px 0px 0px 20px;

183 }

184 /*左脚的动画*/

185 @keyframes leftfoot{

186 /*不同的位置进行不同的旋转*/

187 0% {188 transform:rotate(0deg);

189 }

190

191 30%{

192 transform:rotate(10deg);

193 }

194

195 50%{

196 transform:rotate(0deg);

197 }

198

199 100%{

200 transform:rotate(0deg);

201 }

202 }203

204 .right-foot{

205 width:40px;

206 height:60px;

207 background:black;

208 position:absolute;

209 bottom:-30px;

210 right:120px;

211 z-index:-1;

212 border-radius:0px 0px 0px 5px;

213 animation:rightfoot 0.8s ease-in-out infinite;

214 /*设置旋转元素的基点位置*/

215 transform-origin:left top;

216 }

217 .right-foot::after{

218 content:\'\';

219 display:block;

220 width:40px;

221 height:30px;

222 background