2. <!DOCTYPE html>
    3. <html lang="en">
    5.   <head>
    6.     <meta charset="UTF-8">
    7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.     <meta name="viewport" content="width=device-width, initial-scale=0.2">
    9.     <title>Document</title>
    10.   </head>
    12.   <body>
    13.     <div class="wrap">
    14.       <!-- ice dwen's body -->
    15.       <div class="body"></div>
    16.       <!-- ice dwen's ears -->
    17.       <div class="ear"></div>
    18.       <div class="ear rightEar"></div>
    19.       <!-- ice dwen's hands -->
    20.       <div class="leftHand"></div>
    21.       <div class="rightHand"></div>
    22.       <!-- ice dwen's foots -->
    23.       <div class="leftFoot"></div>
    24.       <div class="rightFoot"></div>
    25.       <!-- my heart -->
    26.       <div class="heart"></div>
    27.       <!-- ice dwen's green face -->
    28.       <div class="greenFace"></div>
    29.       <!-- ice dwen's blue face -->
    30.       <div class="blueFace"></div>
    31.       <!-- ice dwen's pink face -->
    32.       <div class="pinkFace"></div>
    33.       <!-- ice dwen's yellow face -->
    34.       <div class="yellowFace"></div>
    35.       <!-- ice dwen's black face -->
    36.       <div class="blackFace"></div>
    37.       <!-- ice dwen's eyes -->
    38.       <div class="leftEye"></div>
    39.       <div class="rightEye"></div>
    40.       <!-- ice dwen's nose -->
    41.       <div class="nose"></div>
    42.       <!-- ice dwen's mouth -->
    43.       <div class="mouth"></div>
    44.       <!-- ice dwen's chin -->
    45.       <div class="chin"></div>
    46.       <!-- ice dwen's belly -->
    47.       <div class="belly">
    48.         <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0406%2F13a7569fp00qr5c3q00bec000tu00jkc.png%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648996526&t=8c61fa004d82ab9fd7fa9f7fd90572aa"
    49.              alt="你真好看!花束">
    50.       </div>
    51.     </div>
    52.     <style>
    53.       body,
    54.       html {
    55.         /* 请求浏览器内外边距 */
    56.         margin: 0;
    57.         padding: 0;
    58.         /* 设为怪异盒子模型 */
    59.         box-sizing: border-box;
    60.         transform: scale(0.65);
    61.       }
    62.       body {
    63.         margin: 0px;
    64.         width: 100%;
    65.         height: 100%;
    66.         background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
    67.       }
    69.       /* 放置冰墩墩的盒子 */
    70.       .wrap {
    71.         /* 绝对定位 */
    72.         position: relative;
    73.         margin-left: 279px;
    74.         margin-top: 139px;
    75.         height: 948px;
    76.         width: 837px;
    77.       }
    79.       /* 椭圆身体 */
    80.       .body {
    81.         height: 100%;
    82.         width: 100%;
    83.         border: 16px solid #000;
    84.         /* 使用相对定位 */
    85.         position: absolute;
    86.         /* border-radius属性可以绘制一个椭圆作为身体 */
    87.         border-radius: 55% 55% 55% 55% / 50% 50% 60% 60%;
    88.         top: 0;
    89.         left: 0;
    90.         background: #fff;
    91.         /* 层级最高 让身体显示在耳朵上面 */
    92.         z-index: 1;
    93.       }
    95.       /* 左耳 */
    96.       .ear {
    97.         width: 250px;
    98.         height: 334px;
    99.         /* 使用相对定位将耳朵放在正确位置 */
    100.         position: absolute;
    101.         top: 0;
    102.         left: 55px;
    103.         border: 16px solid #000;
    104.         border-radius: 50% 60% 60% 50% / 50% 50% 50% 50%;
    105.         background: #000;
    106.         /* 堆叠层次 实现左耳 */
    107.         z-index: 0;
    108.         /* 使用旋转属性将耳朵放置正确位置 */
    109.         transform: rotate(-20deg);
    110.       }
    112.       /* 右耳 */
    113.       .rightEar {
    114.         /* 右耳添加类名 同样属性 旋转角度调整 */
    115.         right: 55px;
    116.         left: auto;
    117.         transform: rotateY(180deg) rotate(-20deg);
    118.       }
    120.       /* 左手 */
    121.       .leftHand {
    122.         position: absolute;
    123.         z-index: 0;
    124.         width: 223px;
    125.         height: 362px;
    126.         border-radius: 50%;
    127.         background: #000;
    128.         /* 左手定位  */
    129.         top: 280px;
    130.         left: -140px;
    131.         /* 左手旋转到合适位置 */
    132.         transform: rotate(-15deg);
    133.       }
    135.       .leftHand:after {
    136.         position: absolute;
    137.         top: 195px;
    138.         content: '';
    139.         width: 362px;
    140.         height: 223px;
    141.         background: #000;
    142.         border-radius: 50%;
    143.         transform: rotate(35deg);
    144.       }
    146.       /* 右手 */
    147.       .rightHand {
    148.         /* 右手定位 将右手定位到合适位置 */
    149.         position: absolute;
    150.         right: -210px;
    151.         top: 470px;
    152.         /* 设置堆叠层次 不淹没身体 */
    153.         z-index: 0;
    154.         height: 223px;
    155.         width: 223px;
    156.         border-radius: 50%;
    157.         background: #000;
    158.       }
    160.       /* 右手设置样式 使用:after */
    161.       .rightHand:after {
    162.         /* 与左手同理 使用定位定到合适位置 */
    163.         position: absolute;
    164.         top: -66px;
    165.         left: -70px;
    166.         background: #000;
    167.         width: 220px;
    168.         height: 223px;
    169.         content: '';
    170.         transform: rotate(-47deg);
    171.         border-radius: 0 0 0 80%;
    172.       }
    174.       /* 左脚 */
    175.       .leftFoot {
    176.         /* 将左脚定位到指定位置 */
    177.         position: absolute;
    178.         top: 840px;
    179.         left: 80px;
    180.         width: 250px;
    181.         height: 250px;
    182.         border-radius: 50%;
    183.         background: #000;
    184.       }
    186.       .leftFoot:after {
    187.         /* 将左脚定位到固定位置 这不是完整的左脚 */
    188.         position: absolute;
    189.         /* 设置堆叠层次 */
    190.         z-index: 0;
    191.         content: '';
    192.         background: #000;
    193.         height: 250px;
    194.         width: 250px;
    195.         left: 30px;
    196.         top: -125px;
    197.         /* 旋转10度到合适位置 */
    198.         transform: rotate(10deg);
    199.         /* 设置圆角属性 椭圆 */
    200.         border-radius: 0% 50% 50% 0%;
    201.       }
    203.       /* 右脚 */
    204.       .rightFoot {
    205.         background: #000;
    206.         width: 250px;
    207.         height: 250px;
    208.         /* 将有较定位到合适位置 */
    209.         position: absolute;
    210.         top: 840px;
    211.         right: 80px;
    212.         border-radius: 50%;
    213.       }
    215.       /* 右脚的腿杆 其实有点粗 是个柱子 */
    216.       .rightFoot:after {
    217.         content: '';
    218.         /* 设置她的腿粗细 */
    219.         width: 250px;
    220.         height: 250px;
    221.         /* 将这个柱子定位到合适位置 */
    222.         position: absolute;
    223.         top: -125px;
    224.         right: 28px;
    225.         z-index: 0;
    226.         background: #000;
    227.         transform: rotate(-12deg);
    228.         border-radius: 0% 0% 0% 50%;
    229.       }
    231.       /* 把心给你 */
    232.       .heart {
    233.         width: 140px;
    234.         height: 140px;
    235.         /* 一定取消这个背景颜色  利用伪类设置背景颜色!!!!! */
    236.         /* background: red;   */
    237.         position: absolute;
    238.         top: 350px;
    239.         left: -90px;
    240.         z-index: 2;
    241.       }
    243.       /* 实现爱心的重要步骤 */
    244.       .heart:before,
    245.       .heart:after {
    246.         content: '';
    247.         position: absolute;
    248.         top: 0;
    249.         width: 33px;
    250.         height: 55px;
    251.         background: red;
    252.         border-radius: 55px 55px 0% 0%;
    253.       }
    255.       /* 使用transform */
    256.       .heart:after {
    257.         transform: rotate(45deg);
    258.         right: 90px;
    259.       }
    261.       .heart:before {
    262.         transform: rotate(-45deg);
    263.         left: 0;
    264.       }
    266.       /* 脸上绿色的圈圈 */
    267.       .greenFace {
    268.         width: 661px;
    269.         height: 517px;
    270.         border: 10px solid #6cf078;
    271.         /* 绿色是的脸已经可以了  */
    272.         border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;
    273.         /* 接下来定位到脑壳中间去 */
    274.         position: absolute;
    275.         top: 95px;
    276.         left: 83px;
    277.         /* z-index: inherit; */
    278.         z-index: 1;
    279.         /*  */
    280.       }
    282.       /* 蓝色的脸 */
    283.       .blueFace {
    284.         width: 642px;
    285.         height: 501px;
    286.         border: 10px solid yellow;
    287.         /* 蓝色是的脸已经可以了  */
    288.         border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;
    289.         /* 接下来定位到脑壳中间去 */
    290.         position: absolute;
    291.         top: 103px;
    292.         left: 92px;
    293.         /* z-index: inherit; */
    294.         z-index: 1;
    295.         /*  */
    296.       }
    298.       /* 粉红色的脸 */
    299.       .pinkFace {
    300.         width: 619px;
    301.         height: 480px;
    302.         border: 10px solid red;
    303.         /* 蓝色是的脸已经可以了  */
    304.         border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;
    305.         /* 接下来定位到脑壳中间去 */
    306.         position: absolute;
    307.         top: 113px;
    308.         left: 104px;
    309.         /* z-index: inherit; */
    310.         z-index: 1;
    311.         /*  */
    312.       }
    314.       /* 黄色的脸 */
    315.       .yellowFace {
    316.         width: 591px;
    317.         height: 451px;
    318.         border: 13px solid #335fe6;
    319.         /* 黄色是的脸已经可以了  */
    320.         border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;
    321.         /* 接下来定位到脑壳中间去 */
    322.         position: absolute;
    323.         top: 125px;
    324.         left: 115px;
    325.         /* z-index: inherit; */
    326.         z-index: 1;
    327.         /*  */
    328.       }
    330.       /* 黑色的脸 */
    331.       .blackFace {
    332.         width: 567px;
    333.         height: 422px;
    334.         border: 13px solid #000;
    335.         /* 黄色是的脸已经可以了  */
    336.         border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;
    337.         /* 接下来定位到脑壳中间去 */
    338.         position: absolute;
    339.         top: 137px;
    340.         left: 126px;
    341.         /* z-index: inherit; */
    342.         z-index: 1;
    343.         /*  */
    344.       }
    346.       /* 左眼 */
    347.       .leftEye {
    348.         /* 设置眼睛大小 */
    349.         width: 168px;
    350.         height: 222px;
    351.         background: #000;
    352.         /* 设置堆叠层级，眼睛高于身体 */
    353.         /* 先实现一个圆的眼睛 通过:after设置椭圆眼睛 */
    354.         border-radius: 50%;
    355.         z-index: 2;
    356.         /* 将眼睛旋转45度 */
    357.         transform: rotate(45deg);
    358.         position: absolute;
    359.         top: 222px;
    360.         left: 180px;
    361.       }
    363.       /* 右眼 */
    364.       .rightEye {
    365.         /* 设置眼睛大小 */
    366.         width: 168px;
    367.         height: 222px;
    368.         background: #000;
    369.         /* 设置堆叠层级，眼睛高于身体 */
    370.         /* 先实现一个圆的眼睛 通过:after设置椭圆眼睛 */
    371.         border-radius: 50%;
    372.         z-index: 2;
    373.         /* 将眼睛旋转45度 右眼定位和旋转都与左眼相反 */
    374.         transform: rotate(-45deg);
    375.         /* 使用定位将眼睛放置合适位置 */
    376.         position: absolute;
    377.         top: 222px;
    378.         right: 180px;
    379.       }
    381.       /* 眼球白色部分 */
    382.       .rightEye:after,
    383.       .leftEye:after {
    384.         position: absolute;
    385.         width: 84px;
    386.         height: 84px;
    387.         border: 8px solid #fff;
    388.         border-radius: 50%;
    389.         content: '';
    390.         top: 28px;
    391.         left: 35px;
    392.       }
    394.       /* 右眼 */
    395.       .rightEye:after {
    396.         left: auto;
    397.         right: 35px;
    398.       }
    400.       /* 眼球白色部分 */
    401.       .rightEye:before,
    402.       .leftEye:before {
    403.         position: absolute;
    404.         top: 64px;
    405.         left: 64px;
    406.         background: #fff;
    407.         border-radius: 50%;
    408.         content: '';
    409.         width: 28px;
    410.         height: 28px;
    411.       }
    413.       /* 右眼 */
    414.       .rightEye:before {
    415.         left: 70px;
    416.         top: 56px;
    417.       }
    419.       /* 鼻子 */
    420.       .nose {
    421.         width: 84px;
    422.         height: 84px;
    423.         background: #000;
    424.         /* 将鼻子放置合适位置 */
    425.         position: absolute;
    426.         left: 50%;
    427.         margin-left: -42px;
    428.         top: 350px;
    429.         /* 设置鼻子堆叠层数 不会被身体遮掩 */
    430.         z-index: 1;
    431.         border-radius: 30%;
    432.         /* 使用旋转和斜切将鼻子放置合适位置 */
    433.         transform: rotate(50deg) skewY(-10deg);
    434.       }
    436.       /* 接下来给鼻子做个手术吧 */
    437.       .nose:after {
    438.         content: '';
    439.         /* 开始给鼻子做手术了 */
    440.         width: 103px;
    441.         height: 108px;
    442.         border-radius: 50%;
    443.         /* 设置上边框 */
    444.         border-top: 28px solid #fff;
    445.         /* 使用定位将鼻子啮合 */
    446.         position: absolute;
    447.         top: -17px;
    448.         left: 0px;
    449.         /* 使用斜切补鼻子 */
    450.         transform: rotate(-45deg) skewY(0deg);
    451.       }
    453.       /* 嘴巴 */
    454.       .mouth {
    455.         width: 265px;
    456.         height: 120px;
    457.         border: 14px solid #000;
    458.         /* 设置定位把嘴巴放置合适位置 */
    459.         position: absolute;
    460.         top: 400px;
    461.         left: 50%;
    462.         /* 设置嘴巴堆叠层次 防止被遮掩 */
    463.         z-index: 1;
    464.         /* 距离左边间隔 */
    465.         margin-left: -140px;
    466.         /* 设置嘴巴边框 形状 */
    467.         border-radius: 0% 0% 50% 50% / 0% 0% 100% 100%;
    468.         /* 上边框为空 不要上边框 */
    469.         border-top: none;
    470.       }
    472.       .mouth:after,
    473.       .mouth:before {
    474.         content: '';
    475.         /* 使用定位将嘴巴放置合适位置 */
    476.         position: absolute;
    477.         width: 140px;
    478.         height: 140px;
    479.         background: #fff;
    480.         top: -30px;
    481.         /* 旋转角度 */
    482.         transform: rotate(45deg);
    483.       }
    485.       .mouth:after {
    486.         left: -60px;
    487.       }
    489.       .mouth:before {
    490.         right: -60px;
    491.       }
    493.       /* 肚子上的图标 方丈图片吧 */
    494.       .belly {
    495.         width: 150px;
    496.         height: 150px;
    497.         position: absolute;
    498.         top: 72%;
    499.         left: 45%;
    500.         margin-left: -25px;
    501.         z-index: 1;
    502.       }
    504.       .belly img {
    505.         width: 150px;
    506.         height: 150px;
    507.       }
    508.     </style>
    509.     <script>
    510.       /* 注：后续发现黄色的脸和蓝色的脸很奇怪，我把颜色改了 */
    511.       (() => {
    512.         "use strict";
    513.         var i = {
    514.           138: (i, t, s) => {
    515.             class h {
    516.               constructor(i = {}) {
    517.                 this.isRain = i.isRain || !1, this.el = null, this.dir = i.dir || "r", this
    518.                   .width = 0, this.maxWidth = i.maxWidth || 80, this.minWidth = i
    519.                   .minWidth || 2, this.opacity = 0, this.x = 0, this.y = 0, this.z = 0,
    520.                   this.sx = 0, this.isSwing = !1, this.stepSx = .02, this.swingRadian = 1,
    521.                   this.swingStep = .01, this.sy = 0, this.maxSpeed = i.maxSpeed || 4, this
    522.                   .minSpeed = i.minSpeed || 1, this.quickMaxSpeed = i.quickMaxSpeed || 10,
    523.                   this.quickMinSpeed = i.quickMinSpeed || 8, this.quickWidth = i
    524.                   .quickWidth || 80, this.quickOpacity = i.quickOpacity || .2, this
    525.                   .windowWidth = window.innerWidth, this.windowHeight = window
    526.                   .innerHeight, this.init()
    527.               }
    528.               init(i) {
    529.                 let t = Math.random() > .8;
    530.                 this.isSwing = Math.random() > .8, this.width = t ? this.quickWidth : Math
    531.                   .floor(Math.random() * this.maxWidth + this.minWidth), this.opacity =
    532.                   t ? this.quickOpacity : Math.random(), this.x = Math.floor(Math
    533.                                                                              .random() * (this.windowWidth - this.width)), this.y = Math.floor(
    534.                   Math
    535.                   .random() * (this.windowHeight - this.width)), i && Math.random() >
    536.                   .8 ? this.x = -this.width : i && (this.y = -this.width), this.sy = t ?
    537.                   Math.random() * this.quickMaxSpeed + this.quickMinSpeed : Math
    538.                   .random() * this.maxSpeed + this.minSpeed, this.sx = "r" === this.dir ?
    539.                   this
    540.                   .sy : -this.sy, this.z = t ? 300 * Math.random() + 200 : 0, this
    541.                   .swingStep = .01 * Math.random(), this.swingRadian = Math.random() * (
    542.                   1.1 - .9) + .9
    543.               }
    544.               setStyle() {
    545.                 this.el.style.cssText =
    546.                   `\n            position: fixed;\n            left: 0;\n            top: 0;\n            display: block;\n            width: ${this.isRain?1:this.width}px;\n            height: ${this.width}px;\n            opacity: ${this.opacity};\n            background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);\n            border-radius: 50%;\n            z-index: 9999999999999;\n            pointer-events: none;\n            transform: translate(${this.x}px, ${this.y}px) ${this.getRotate(this.sy,this.sx)};\n        `
    547.               }
    548.               render() {
    549.                 this.el = document.createElement("div"), this.setStyle(), document.body
    550.                   .appendChild(this.el)
    551.               }
    552.               move() {
    553.                 this.isSwing ? ((this.swingRadian > 1.1 || this.swingRadian < .9) && (this
    554.                                                                                       .swingStep = -this.swingStep), this.swingRadian += this
    555.                                 .swingStep, this.isRain ? this.x += this.sx : this.x += this.sx *
    556.                                 Math.sin(this.swingRadian * Math.PI), this.y -= this.sy * Math.cos(
    557.                   this.swingRadian * Math.PI)) : (this.x += this.sx, this.y +=
    558.                                                   this.sy), (this.x < -this.width || this.x > this.windowWidth || this
    559.                                                              .y > this.windowHeight) && (this.init(!0), this.setStyle()), this.el
    560.                   .style.transform =
    561.                   `translate3d(${this.x}px, ${this.y}px, ${this.z}px) ${this.getRotate(this.sy,this.sx)}`
    562.               }
    563.               getRotate(i, t) {
    564.                 return this.isRain ?
    565.                   `rotate(${0===t?0:90+Math.atan(i/t)*(180/Math.PI)}deg)` : ""
    566.               }
    567.             }
    568.             class n {
    569.               constructor(i = {}) {
    570.                 this.num = i.num || 100, this.opt = i, this.snowList = [], this
    571.                   .createSnows(), this.moveSnow()
    572.               }
    573.               createSnows() {
    574.                 this.snowList = [];
    575.                 for (let i = 0; i < this.num; i++) {
    576.                   let i = new h(this.opt);
    577.                   i.render(), this.snowList.push(i)
    578.                 }
    579.               }
    580.               moveSnow() {
    581.                 window.requestAnimationFrame((() => {
    582.                   this.snowList.forEach((i => {
    583.                     i.move()
    584.                   })), this.moveSnow()
    585.                 }))
    586.               }
    587.             }
    588.             new n({
    589.               isRain: !0,
    590.               num: 300,
    591.               maxSpeed: 15
    592.             }), new n({
    593.               isRain: !1,
    594.               num: 150
    595.             })
    596.           }
    597.         },
    598.             t = {};
    600.         function s(h) {
    601.           if (t[h]) return t[h].exports;
    602.           var n = t[h] = {
    603.             exports: {}
    604.           };
    605.           return i[h](n, n.exports, s), n.exports
    606.         }
    607.         s.d = (i, t) => {
    608.           for (var h in t) s.o(t, h) && !s.o(i, h) && Object.defineProperty(i, h, {
    609.             enumerable: !0,
    610.             get: t[h]
    611.           })
    612.         }, s.o = (i, t) => Object.prototype.hasOwnProperty.call(i, t), s(138)
    613.       })();
    614.     </script>
    615.     <!-- 小邱  -->
    616.   </body>
    618. </html>