小程序上课第三天，因为今天院里有活动，所以没去上课，第四天上午又因为要召开入党转正大会，又耽误了一上午，下午去上课，要了资料。这两天讲了一些零零碎碎的东西，做的实例有上面这个小黄人
都是用的css，基本上都是用border，transform：rotate()，animation，和一些细节做的，左边的对话框那里的小尖头也是一个重点细节
下面附上代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>小黄人模仿</title> 7 <link rel="stylesheet" href=""> 8 <link rel="stylesheet" type="text/css" href="css/index.css"> 9 </head> 10 <body> 11 <!-- 最外层的容器 --> 12 <div class="wrapper"> 13 <!-- 身体的容器 --> 14 <div class="bodyH"> 15 <!-- 将裤子分成两个部分，裤子下面其实是个矩形(超出身体容器的部分给隐藏了)，裤子上面的矩形--> 16 <div class="kuzi"> 17 <div class="kuzi-bottom"> 18 19 </div> 20 <!-- 裤子下面结束 --> 21 <div class="kuzi-top"> 22 23 </div> 24 <!-- 裤子上面结束 --> 25 <!-- 衣服上面的线是通过1旋转，2设边框3弧度实现的 --> 26 <!-- 左边的线 --> 27 <div class="left-line"> 28 29 </div> 30 <!-- 中间的线 --> 31 <div class="middle-line"> 32 33 </div> 34 <!-- 右边的线 --> 35 <div class="right-line"> 36 37 </div> 38 <!-- 小口袋 --> 39 <div class="koudai"> 40 41 </div> 42 <!-- 左边的背带 --> 43 <div class="left-beidai"> 44 45 </div> 46 <!-- 右边的背带 --> 47 <div class="right-beidai"> 48 49 </div> 50 51 </div> 52 <!-- 裤子部分结束 --> 53 </div> 54 <!-- 身体容器结束 --> 55 56 <!-- 脚的部分开始 --> 57 <div class="foot"> 58 <div class="left-foot"> 59 60 </div> 61 <div class="right-foot"> 62 63 </div> 64 </div> 65 <!-- 脚下面的阴影 --> 66 <div class="foot-shadow"> 67 68 </div> 69 <!-- 脚的部分结束 --> 70 <!-- 嘴的部分开始 --> 71 <div class="mouse"> 72 <!-- 嘴巴是一个矩形进行旋转，弧度，上面那个横线用after元素在加了一个矩形的bottom边框 --> 73 <div class="mouse-shape"> 74 75 </div> 76 </div> 77 78 <!-- 眼睛开始 --> 79 <div class="eye"> 80 <div class="left-eye"> 81 <div class="eye-line"></div> 82 <div class="eye-circle"> 83 <div class="eye-yanzhu"> 84 <div class="eye-baidian"> 85 86 </div> 87 </div> 88 </div> 89 </div> 90 <div class="right-eye"> 91 <div class="eye-line"></div> 92 <div class="eye-circle"> 93 <div class="eye-yanzhu"> 94 <div class="eye-baidian"> 95 96 </div> 97 </div> 98 </div> 99 </div>100 </div>101 <!-- 眼睛结束 -->102 <!-- 胳膊开始 -->103 <div class="arm">104 <!-- after伪元素增加了一点胳膊肘的地方的线条 -->105 <div class="left-arm"></div>106 <div class="right-arm"></div>107 </div>108 <!-- 胳膊结束 -->109 <!-- 头发开始 -->110 <div class="hair">111 <div class="tophair"></div>112 <div class="middlehair"></div>113 <div class="bottomhair"></div>114 </div>115 <!-- 头发结束 -->116 117 </div>118 119 <!-- 对话框 -->120 <div class="duihuakuang">121 <span class="hello">122 我是计科141班张雪123 </span>124 125 </div>126 </body>127 </html>
1 /* 2 * @Author: ÐéÖñ 3 * @Date: 2017-06-04 15:36:24 4 * @Last Modified by: 虚竹 5 * @Last Modified time: 2017-06-04 20:48:44 6 */ 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: black;223 position: absolute;224 bottom: -0px;225 right: -30px;226 border-radius: 0px 30px 20px 0px;227 }228 /*右脚的动画*/229 @keyframes rightfoot{230 0% {231 transform: rotate(0deg);232 }233 234 50% {235 transform: rotate(0deg);236 }237 238 80% {239 transform: rotate(-10deg);240 }241 242 100% {243 transform: rotate(0deg);244 }245 }246 247 /*脚下面的阴影*/248 .foot-shadow{249 width: 200px;250 height: 5px;251 border-radius: 50%;252 /*加一个transtion,backfround是初始态，transtion是过渡本身*/253 background: rgba(0, 0, 0, 0.3);254 /*transtion:background 2s;*/255 position: absolute;256 bottom: -38px;257 left: 28px;258 /* 阴影 */259 box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.3);260 animation:change-shadow 1s ease-in-out infinite;261 }262 @keyframes change-shadow{263 0%{264 background:rgba(244, 154, 21, 0.9);265 }266 30%{267 background:rgba(100, 78, 96, 0.7);268 }269 50%{270 background:rgba(201, 115, 103,0.5);271 }272 70%{273 background:rgba(118, 28, 119, 0.7);274 }275 100%{276 background:rgba(150, 98, 82,0.5);277 }278 }279 280 /*嘴巴*/281 .mouse {282 width: 60px;283 height: 35px;284 border: 5px solid black;285 position: absolute;286 bottom: 210px;287 left: -40px;288 right: 0;289 margin: auto;290 background: white;291 transform: rotate(-35deg);292 border-radius: 0px 0px 0px 50px;293 border-top: none;294 border-right: none;295 animation: mouse-move 2s ease-in-out infinite;296 }297 298 /* 伪元素 */299 .mouse::after {300 content: ‘‘;301 width: 68px;302 height: 50px;303 display: block;304 background: #F9D946;305 position: absolute;306 top: -30px;307 left: 8px;308 border-bottom: 5px solid black;309 transform: rotate(31deg);310 z-index: 20;311 animation: mouse-line-move 2s ease-in-out infinite;312 }313 /*嘴巴的动画*/314 @keyframes mouse-move{315 0% ,30%{316 width: 60px;317 height: 35px;318 }319 320 50% {321 width: 40px;322 height: 25px;323 }324 325 70%,100% {326 width: 60px;327 height: 35px;328 }329 }330 @keyframes mouse-line-move{331 0%,30% {332 width: 68px;333 top: -30px;334 }335 336 50% {337 width: 48px;338 top: -35px;339 }340 341 70%,100%{342 width: 68px;343 top: -30px;344 }345 }346 347 /*眼睛*/348 .eye {349 position: relative;350 top: -300px;351 }352 353 .eye-line {354 width: 35px;355 height: 20px;356 background: black;357 transform: rotate(5deg);358 }359 .eye-circle{360 width: 80px;361 height: 80px;362 border-radius: 50%;363 background: white;364 border: 5px solid black;365 position: absolute;366 top: -40px;367 left: 30px;368 }369 .eye-yanzhu{370 width: 40px;371 height: 40px;372 border-radius: 50%;373 background: black;374 position: absolute;375 left: 0;376 right: 0;377 top: 0;378 bottom: 0;379 margin: auto;380 animation: yanzhu 3s ease-in-out infinite;381 }382 .eye-baidian{383 width: 20px;384 height: 20px;385 border-radius: 50%;386 background: white;387 position: absolute;388 top: 5px;389 right: 5px;390 animation: baidian 3s ease-in-out infinite;391 }392 /*眼珠的动画*/393 @keyframes yanzhu{394 0% {395 transform: translateX(0px);396 }397 30% {398 transform: translateX(15px); 399 }400 50% {401 transform: translateX(0px);402 }403 80% {404 transform: translateX(-15px);405 }406 100% {407 transform: translateX(0px);408 }409 }410 @keyframes baidian{411 0% {412 413 }414 30% {415 transform: translate3d(5px, 5px, 0px);416 }417 50% {418 transform: translate3d(0px, 0px, 0px);419 }420 80% {421 transform: translate3d(-15px, 5px, 0px);422 }423 100% {424 transform: translate3d(0, 0, 0);425 }426 }427 .right-eye>.eye-line{428 position: absolute;429 width: 50px;430 right: 50px;431 transform: rotate(-10deg);432 top: -0px;433 }434 .right-eye>.eye-circle{435 position: absolute;436 top: -40px;437 left: 123px;438 }439 440 /*胳膊*/441 .left-arm{442 width: 60px;443 height: 60px;444 border: 5px solid black;445 position: absolute;446 left: 5px;447 bottom: 140px;448 transform: rotate(45deg);449 border-radius: 0px 0px 0px 20px;450 z-index: -5;451 background: #F9D946;452 animation: left-arm-move 0.8s ease-in-out infinite;453 /*设置旋转元素的基点位置*/454 transform-origin: left top;455 }456 /*after是胳膊肘那里的一点点线条*/457 .left-arm::after {458 content: ‘‘;459 height: 15px;460 border: 3px solid black;461 display: block;462 position: absolute;463 top: 20px;464 left: 20px;465 border-radius: 5px;466 }467 468 @keyframes left-arm-move{469 0% {470 471 }472 473 50% {474 transform: rotate(40deg);475 }476 }477 478 .right-arm {479 width: 60px;480 height: 60px;481 border: 5px solid black;482 position: absolute;483 right: -10px;484 bottom: 140px;485 transform: rotate(45deg);486 border-radius: 0px 20px 0px 0px;487 z-index: -5;488 background: #F9D946;489 animation: right-arm-move 0.8s ease-in-out infinite;490 transform-origin: left top;491 }492 493 /* after, before */494 .right-arm::after {495 content: ‘‘;496 width: 15px;497 border: 3px solid black;498 display: block;499 position: absolute;500 top: 20px;501 right: 20px;502 border-radius: 5px;503 }504 @keyframes right-arm-move {505 0% {506 507 }508 509 50% {510 transform: rotate(40deg);511 }512 }513 514 /*头发*/515 .tophair{516 width: 130px;517 height: 100px;518 border-top: 8px solid black;519 border-radius: 50%;520 position: absolute;521 top: 0px;522 transform: rotate(25deg);523 left: 20px;524 top: -10px;525 z-index: -10;526 }527 .middlehair{528 width: 130px;529 height: 100px;530 border-top: 5px solid black;531 border-radius: 60%;532 position: absolute;533 top: 0px;534 transform: rotate(20deg);535 left: 30px;536 top: 0px;537 z-index: -10;538 }539 .bottomhair{540 width: 200px;541 height: 100px;542 border-top: 9px solid #3F9F00;543 border-radius: 60%;544 position: absolute;545 top: 0px;546 transform: rotate(60deg);547 left: 0px;548 top: 0px;549 z-index: -10;550 551 }552 553 /* 对话框*/554 .duihuakuang{555 width: 230px;556 height: 110px;557 border: 2px solid black;558 position: relative;559 top: -400px;560 left: 250px;561 border-radius: 50px;562 }563 .duihuakuang::before{564 content:"";565 width:0px;566 height:0px;567 border-width: 20px;568 border-style:solid;569 border-color:transparent transparent transparent black;570 position:absolute;571 top: 35px;572 left:99%;573 }574 .duihuakuang::after{575 content:"";576 width:0px;577 height:0px;578 border-width: 18px;579 border-style:solid;580 border-color:transparent transparent transparent white;581 position:absolute;582 top: 37px;583 left:99%;584 }585 .duihuakuang>.hello{586 color:black;587 position:absolute;588 top: 40px;589 left: 20px;590 font-size: 18px;591 animation:changeColor 4s ease-in-out infinite;592 }593 @keyframes changeColor{594 0%{595 color:black;596 font-size:20px;597 }598 30%{599 color:red;600 font-size:22px;601 }602 50%{603 color:#4C5C2F;604 font-size:24px;605 }606 80%{607 color:#F9AD23;608 font-size:22px;609 }610 100%{611 color:#36CFF5;612 font-size:20px;613 }614 }
