HTMLCSS： 实现可爱的冰墩墩

效果演示

HTML

 <div class="wrap"><div class="body"></div><div class="ear"></div><div class="ear rightEar"></div><div class="leftHand"></div><div class="rightHand"></div><div class="leftFoot"></div><div class="rightFoot"></div><div class="heart"></div><div class="greenFace"></div><div class="blueFace"></div><div class="pinkFace"></div><div class="yellowFace"></div><div class="blackFace"></div><div class="leftEye"></div><div class="rightEye"></div><div class="nose"></div><div class="mouth"></div><div class="chin"></div>
</div>

CSS

body,
html {margin: 0;padding: 0;transform: scale(0.65);
}body {width: 100vh;height: 100vh;background: linear-gradient(#adf, #ddd);
}.wrap {position: relative;margin-left: 279px;margin-top: 139px;height: 948px;width: 837px;
}.body {height: 100%;width: 100%;border: 16px solid #000;position: absolute;border-radius: 55% 55% 55% 55% / 50% 50% 60% 60%;top: 0;left: 0;background: #fff;z-index: 1;
}.ear {width: 250px;height: 334px;position: absolute;top: 0;left: 55px;border: 16px solid #000;border-radius: 50% 60% 60% 50% / 50% 50% 50% 50%;background: #000;z-index: 0;transform: rotate(-20deg);
}.rightEar {right: 55px;left: auto;transform: rotateY(180deg) rotate(-20deg);
}.leftHand {position: absolute;z-index: 0;width: 223px;height: 362px;border-radius: 50%;background: #000;top: 280px;left: -140px;transform: rotate(-15deg);
}.leftHand:after {position: absolute;top: 195px;content: '';width: 362px;height: 223px;background: #000;border-radius: 50%;transform: rotate(35deg);
}.rightHand {position: absolute;right: -210px;top: 470px;z-index: 0;height: 223px;width: 223px;border-radius: 50%;background: #000;
}.rightHand:after {position: absolute;top: -66px;left: -70px;background: #000;width: 220px;height: 223px;content: '';transform: rotate(-47deg);border-radius: 0 0 0 80%;
}.leftFoot {position: absolute;top: 840px;left: 80px;width: 250px;height: 250px;border-radius: 50%;background: #000;
}.leftFoot:after {position: absolute;z-index: 0;content: '';background: #000;height: 250px;width: 250px;left: 30px;top: -125px;transform: rotate(10deg);border-radius: 0% 50% 50% 0%;
}.rightFoot {background: #000;width: 250px;height: 250px;position: absolute;top: 840px;right: 80px;border-radius: 50%;
}.rightFoot:after {content: '';width: 250px;height: 250px;position: absolute;top: -125px;right: 28px;z-index: 0;background: #000;transform: rotate(-12deg);border-radius: 0% 0% 0% 50%;
}.heart {width: 140px;height: 140px;position: absolute;top: 350px;left: -90px;z-index: 2;
}.heart:before,
.heart:after {content: '';position: absolute;top: 0;width: 33px;height: 55px;background: red;border-radius: 55px 55px 0% 0%;
}.heart:after {transform: rotate(45deg);right: 90px;
}.heart:before {transform: rotate(-45deg);left: 0;
}.greenFace {width: 661px;height: 517px;border: 10px solid #6cf078;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 95px;left: 83px;z-index: 1;
}.blueFace {width: 642px;height: 501px;border: 10px solid yellow;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 103px;left: 92px;z-index: 1;
}.pinkFace {width: 619px;height: 480px;border: 10px solid red;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 113px;left: 104px;z-index: 1;
}.yellowFace {width: 591px;height: 451px;border: 13px solid #335fe6;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 125px;left: 115px;z-index: 1;
}.blackFace {width: 567px;height: 422px;border: 13px solid #000;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 137px;left: 126px;z-index: 1;
}.leftEye {width: 168px;height: 222px;background: #000;border-radius: 50%;z-index: 2;transform: rotate(45deg);position: absolute;top: 222px;left: 180px;
}.rightEye {width: 168px;height: 222px;background: #000;border-radius: 50%;z-index: 2;transform: rotate(-45deg);position: absolute;top: 222px;right: 180px;
}.rightEye:after,
.leftEye:after {position: absolute;width: 84px;height: 84px;border: 8px solid #fff;border-radius: 50%;content: '';top: 28px;left: 35px;
}.rightEye:after {left: auto;right: 35px;
}.rightEye:before,
.leftEye:before {position: absolute;top: 64px;left: 64px;background: #fff;border-radius: 50%;content: '';width: 28px;height: 28px;
}.rightEye:before {left: 70px;top: 56px;
}.nose {width: 84px;height: 84px;background: #000;position: absolute;left: 50%;margin-left: -42px;top: 350px;z-index: 1;border-radius: 30%;transform: rotate(50deg) skewY(-10deg);
}.nose:after {content: '';width: 103px;height: 108px;border-radius: 50%;border-top: 28px solid #fff;position: absolute;top: -17px;left: 0px;transform: rotate(-45deg) skewY(0deg);
}.mouth {width: 265px;height: 120px;border: 14px solid #000;position: absolute;top: 400px;left: 50%;z-index: 1;margin-left: -140px;border-radius: 0% 0% 50% 50% / 0% 0% 100% 100%;border-top: none;
}.mouth:after,
.mouth:before {content: '';position: absolute;width: 140px;height: 140px;background: #fff;top: -30px;transform: rotate(45deg);
}.mouth:after {left: -60px;
}.mouth:before {right: -60px;
}.belly {width: 150px;height: 150px;position: absolute;top: 72%;left: 45%;margin-left: -25px;z-index: 1;
}.belly img {width: 150px;height: 150px;
}

js

(() => {"use strict";const module = {138: (exports, module) => {class Snowflake {constructor(options = {}) {this.isRain = options.isRain || false;this.el = null;this.dir = options.dir || "r";this.width = 0;this.maxWidth = options.maxWidth || 80;this.minWidth = options.minWidth || 2;this.opacity = 0;this.x = 0;this.y = 0;this.z = 0;this.sx = 0;this.isSwing = false;this.stepSx = 0.02;this.swingRadian = 1;this.swingStep = 0.01;this.sy = 0;this.maxSpeed = options.maxSpeed || 4;this.minSpeed = options.minSpeed || 1;this.quickMaxSpeed = options.quickMaxSpeed || 10;this.quickMinSpeed = options.quickMinSpeed || 8;this.quickWidth = options.quickWidth || 80;this.quickOpacity = options.quickOpacity || 0.2;this.windowWidth = window.innerWidth;this.windowHeight = window.innerHeight;this.init();}init(initOptions) {let isQuick = Math.random() > 0.8;this.isSwing = Math.random() > 0.8;this.width = isQuick ? this.quickWidth : Math.floor(Math.random() * this.maxWidth + this.minWidth);this.opacity = isQuick ? this.quickOpacity : Math.random();this.x = Math.floor(Math.random() * (this.windowWidth - this.width));this.y = Math.floor(Math.random() * (this.windowHeight - this.width));if (initOptions && Math.random() > 0.8) {this.x = -this.width;} else if (initOptions) {this.y = -this.width;}this.sy = isQuick ? Math.random() * this.quickMaxSpeed + this.quickMinSpeed : Math.random() * this.maxSpeed + this.minSpeed;this.sx = "r" === this.dir ? this.sy : -this.sy;this.z = isQuick ? 300 * Math.random() + 200 : 0;this.swingStep = 0.01 * Math.random();this.swingRadian = Math.random() * (1.1 - 0.9) + 0.9;}setStyle() {this.el.style.cssText = `position: fixed;left: 0;top: 0;display: block;width: ${this.isRain ? 1 : this.width}px;height: ${this.width}px;opacity: ${this.opacity};background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);border-radius: 50%;z-index: 9999999999999;pointer-events: none;transform: translate(${this.x}px, ${this.y}px) ${this.getRotate(this.sy, this.sx)};`;}render() {this.el = document.createElement("div");this.setStyle();document.body.appendChild(this.el);}move() {if (this.isSwing) {if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {this.swingStep = -this.swingStep;}this.swingRadian += this.swingStep;this.isRain ? this.x += this.sx : this.x += this.sx * Math.sin(this.swingRadian * Math.PI);this.y -= this.sy * Math.cos(this.swingRadian * Math.PI);} else {this.x += this.sx;this.y += this.sy;}if (this.x < -this.width || this.x > this.windowWidth || this.y > this.windowHeight) {this.init(true);this.setStyle();}this.el.style.transform = `translate3d(${this.x}px, ${this.y}px, ${this.z}px) ${this.getRotate(this.sy, this.sx)}`;}getRotate(sy, sx) {return this.isRain ? `rotate(${0 === sx ? 0 : 90 + Math.atan(sy / sx) * (180 / Math.PI)}deg)` : "";}}class Snowfall {constructor(options = {}) {this.num = options.num || 100;this.opt = options;this.snowList = [];this.createSnows();this.moveSnow();}createSnows() {this.snowList = [];for (let i = 0; i < this.num; i++) {let snowflake = new Snowflake(this.opt);snowflake.render();this.snowList.push(snowflake);}}moveSnow() {window.requestAnimationFrame(() => {this.snowList.forEach(snowflake => {snowflake.move();});this.moveSnow();});}}new Snowfall({isRain: true,num: 300,maxSpeed: 15});new Snowfall({isRain: false,num: 150});}};function extend(target, source) {for (let key in source) {if (source.hasOwnProperty(key) && !target.hasOwnProperty(key)) {target[key] = source[key];}}return target;}module[138].exports = module[138]({}, module[138]);
})();