用coding向你最爱的人说圣诞快乐

小明 2025-05-01 19:46:17 5

文章目录

圣诞节的起源
圣诞祝福语
用 coding 说圣诞快乐

Canvas 渲染圣诞树特效
唯美圣诞树
CSS实现圣诞树
简易的圣诞树
线性树

卡��圣诞树

🎄🎄🎄圣诞节即将到来，今天让我们用编码的方式向你最爱的人表达圣诞节快乐

圣诞节的起源

圣诞节源自古罗马人迎接新年的农神节，与基督教本无关系。在基督教盛行罗马帝国后，教廷将这种民俗节日纳入基督教体系，同时以庆祝耶稣的降生。但在圣诞节这天不是耶稣的生辰，因为《圣经》未记载耶稣具体出生时间，同样没提到过有此种节日，是基督教吸收了古罗马神话的结果。

圣诞节是西方传统节日，也是许多西方国家一年中最重要的节日。每年这一天，欢快的圣诞歌在大街小巷飘扬，商场里流光溢彩，琳琅满目，到处弥漫着温馨欢乐的气息。孩子们在甜美的梦乡中，盼望着圣诞老人从天而降，带来梦寐以求的礼物。

平安夜和圣诞节现在很多人都在过，对于很多人而言，并不是在做一个所谓的洋节，而是在这一天让自己爱的人和爱我们的人开心，正如网络上流行的一句话：“ 世界上本没有圣诞老人，所有的惊喜和礼物都来自于爱你的人。 ”

圣诞祝福语

🎄 Merry Christmas

🎄今年圣诞老人🎅🏻也很忙喔

所以轮到我把圣诞惊喜给你咯！

🎄今天扎了个蝴蝶结，像不像你的圣诞礼物。

圣诞节没有领到礼物的到我这里领个37°的拥抱吧🎅🏻

🎄蟹蟹圣诞老公公，送礼全世界最棒的礼物给我，就是把你放进我心里。

麋鹿不会迷路，圣诞之礼，终将准时送达。🎅🏻

多少人，一夜之间，没穿圣诞装，却成了圣诞老人。🎅🏻

把我的小心思，偷偷塞进礼物盒，在圣诞节那一天，通通送给你

圣诞有我，要开心哦(• . •)

我想和你一起看夜景一起吃热热的烤火鸡一起许愿看着那会发光的圣诞树一起倒数

你快跳进圣诞老人的背包里一觉醒来你就是我的礼物

想给每个善良的人一顶圣诞帽愿这顶帽子成为他们的睡帽从此每个安睡的日子都叫平安夜

希望圣诞树和你一起到来🎄

圣诞快乐，喜乐长安。🎄

用 coding 说圣诞快乐

Canvas 渲染圣诞树特效

index.html



    
    
    
    ChristmasTree
    
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%
        }
        body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            position: relative;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        .snow-container {
            position: absolute;
            width: 400px;
            height: 550px;
            color: white;
        }
        @media screen and (max-width: 450px) {
            .snow-container {
                width: 100%;
            }
        }
        .snow-box {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .snow {
            position: absolute;
            animation: 5s snow linear infinite;
        }
        @keyframes snow {
            0% {
                left: 0;
                top: 0
            }
            80% {
                top: 90%
            }
            100% {
                top: 90%
            }
        }
        .snow2 {
            left: 5%;
            top: 2%;
            position: absolute;
            animation: 10s snow2 ease-in infinite;
        }
        @keyframes snow2 {
            0% {
                left: 5%;
                top: 2%;
            }
            80% {
                top: 90%
            }
            100% {
                top: 90%
            }
        }
        .snow3 {
            left: 10%;
            top: 8%;
            position: absolute;
            animation: 8s snow3 ease-out infinite;
        }
        @keyframes snow3 {
            0% {
                left: 5%;
                top: 2%;
            }
            80% {
                top: 90%
            }
            100% {
                top: 90%
            }
        }
        .snow4 {
            left: 18%;
            top: 18%;
            position: absolute;
            animation: 7s snow4 ease-out infinite;
        }
        @keyframes snow4 {
            0% {
                left: 18%;
                top: 18%;
            }
            80% {
                top: 90%
            }
            100% {
                top: 90%
            }
        }
        .snow5 {
            left: 59%;
            top: 1%;
            position: absolute;
            animation: 6s snow4 ease infinite;
        }
        @keyframes snow5 {
            0% {
                left: 75%;
                top: 18%;
            }
            80% {
                top: 90%
            }
            100% {
                top: 90%
            }
        }
        .snow6 {
            left: 65%;
            top: 5%;
            position: absolute;
            animation: 6s snow6 ease-in infinite;
        }
        @keyframes snow6 {
            0% {
                left: 75%;
                top: 18%;
            }
            80% {
                top: 90%
            }
            100% {
                top: 90%
            }
        }
        .snow7 {
            left: 75%;
            top: 18%;
            position: absolute;
            animation: 11s snow5 ease infinite;
        }
        @keyframes snow7 {
            0% {
                left: 75%;
                top: 18%;
            }
            80% {
                top: 90%
            }
            100% {
                top: 90%
            }
        }
        .snow8 {
            left: 90%;
            top: 40%;
            position: absolute;
            animation: 5s snow8 ease-out infinite;
        }
        @keyframes snow8 {
            0% {
                left: 90%;
                top: 20%;
            }
            80% {
                top: 90%
            }
            100% {
                top: 90%
            }
        }
        .snow9 {
            left: 50%;
            top: 10%;
            position: absolute;
            animation: 5s snow9 ease-out infinite;
        }
        @keyframes snow9 {
            0% {
                left: 85%;
                top: 20%;
            }
            80% {
                left: 50%;
                top: 90%
            }
            100% {
                top: 90%
            }
        }
        .snow10 {
            left: 100%;
            top: 10%;
            position: absolute;
            animation: 7s snow10 ease infinite;
        }
        @keyframes snow10 {
            0% {
                left: 100%;
                top: 10%;
            }
            80% {
                left: 50%;
                top: 90%
            }
            100% {
                left: 50%;
                top: 90%
            }
        }
        .text {
            font-size: 40px;
            color: #f1ebe5;
            text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
            font-weight: bold;
            letter-spacing: 2px;
            text-align: center;
            position: absolute;
            white-space: nowrap;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    


    
        
            *
            *
            *
            *
            *
            *
            *
            *
            *
            *
        
        鱼找水的🎄
    
    
    
    
    
        new ChristmasTree().renderTree()

index.js

class ChristmasTree {
    constructor() {
        this.side = 20
        this.gap = 6 + this.side
        this.init()
        this.treeData = []
    }
    init() {
        this.canvas = document.querySelector('#canvas')
        this.ctx = this.canvas.getContext('2d')
        const { width, height } = this.canvas
        this.width = width
        this.height = height
        this.ctx.fillStyle = 'rgb(0, 0, 0)'
        this.ctx.fillRect(0, 0, width, height)
    }
    createArc(x, y, color) {
        this.ctx.beginPath()
        this.ctx.fillStyle = color
        this.ctx.arc(x, y, this.side / 2, 0, Math.PI * 2, false)
        this.ctx.fill()
    }
    createRect(x, y, color) {
        this.ctx.fillStyle = color
        this.ctx.fillRect(x, y, this.side, this.side)
    }
    createPentastar(x, y, color) {
        this.ctx.beginPath()
        const R = this.gap / 2,
            r = this.gap / 5
        for (var i = 0; i 
      Array(n).
        fill(m).
        map((i, j) => i + j);
    const rand = (max, min = 0) => min + Math.random() * (max - min);
    const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min));
    const randChoise = arr => arr[randInt(arr.length)];
    const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)];
    let scene, camera, renderer, analyser;
    let step = 0;
    const uniforms = {
      time: { type: "f", value: 0.0 },
      step: { type: "f", value: 0.0 }
    };
    const params = {
      exposure: 1,
      bloomStrength: 0.9,
      bloomThreshold: 0,
      bloomRadius: 0.5
    };
    let composer;
    const fftSize = 2048;
    const totalPoints = 4000;
    const listener = new THREE.AudioListener();
    const audio = new THREE.Audio(listener);
    document.querySelector("input").addEventListener("change", uploadAudio, false);
    const buttons = document.querySelectorAll(".btn");
    buttons.forEach((button, index) =>
      button.addEventListener("click", () => loadAudio(index)));
    function init() {
      const overlay = document.getElementById("overlay");
      overlay.remove();
      document.getElementById("tree-text").className = "show";
      scene = new THREE.Scene();
      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      camera = new THREE.PerspectiveCamera(
        60,
        window.innerWidth / window.innerHeight,
        1,
        1000);
      camera.position.set(-0.09397456774197047, -2.5597086635726947, 24.420789670889008);
      camera.rotation.set(0.10443543723052419, -0.003827152981119352, 0.0004011488708739715);
      const format = renderer.capabilities.isWebGL2 ?
        THREE.RedFormat :
        THREE.LuminanceFormat;
      uniforms.tAudioData = {
        value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format)
      };
      addPlane(scene, uniforms, 3000);
      addSnow(scene, uniforms);
      range(10).map(i => {
        addTree(scene, uniforms, totalPoints, [20, 0, -20 * i]);
        addTree(scene, uniforms, totalPoints, [-20, 0, -20 * i]);
      });
      const renderScene = new THREE.RenderPass(scene, camera);
      const bloomPass = new THREE.UnrealBloomPass(
        new THREE.Vector2(window.innerWidth, window.innerHeight),
        1.5,
        0.4,
        0.85);
      bloomPass.threshold = params.bloomThreshold;
      bloomPass.strength = params.bloomStrength;
      bloomPass.radius = params.bloomRadius;
      composer = new THREE.EffectComposer(renderer);
      composer.addPass(renderScene);
      composer.addPass(bloomPass);
      addListners(camera, renderer, composer);
      animate();
    }
    function animate(time) {
      analyser.getFrequencyData();
      uniforms.tAudioData.value.needsUpdate = true;
      step = (step + 1) % 1000;
      uniforms.time.value = time;
      uniforms.step.value = step;
      composer.render();
      requestAnimationFrame(animate);
    }
    function loadAudio(i) {
      document.getElementById("overlay").innerHTML =
        '正在下载音乐，请稍等...';
      // const files = [
      //   "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3",
      //   "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3",
      //   "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",
      //   "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"];
      const files = ["./music/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3",
        "./music/Dott_-_01_-_This_Christmas.mp3",
        "./music/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",
        "./music/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"];
      const file = files[i];
      const loader = new THREE.AudioLoader();
      loader.load(file, function (buffer) {
        audio.setBuffer(buffer);
        audio.play();
        analyser = new THREE.AudioAnalyser(audio, fftSize);
        init();
      });

    }
    function uploadAudio(event) {
      document.getElementById("overlay").innerHTML =
        '请稍等...';
      const files = event.target.files;
      const reader = new FileReader();
      reader.onload = function (file) {
        var arrayBuffer = file.target.result;
        listener.context.decodeAudioData(arrayBuffer, function (audioBuffer) {
          audio.setBuffer(audioBuffer);
          audio.play();
          analyser = new THREE.AudioAnalyser(audio, fftSize);
          init();
        });
      };
      reader.readAsArrayBuffer(files[0]);
    }
    function addTree(scene, uniforms, totalPoints, treePosition) {
      const vertexShader = `
      attribute float mIndex;
      varying vec3 vColor;
      varying float opacity;
      uniform sampler2D tAudioData;
      float norm(float value, float min, float max ){
       return (value - min) / (max - min);
      }
      float lerp(float norm, float min, float max){
       return (max - min) * norm + min;
      }
      float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){
       return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
      }
      void main() {
       vColor = color;
       vec3 p = position;
       vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
       float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r;
       float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 );
       float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0);
       opacity = map(mvPosition.z , -200.0, 15.0, 0.0, 1.0);
       gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z );
       gl_Position = projectionMatrix * mvPosition;
      }
      `;
      const fragmentShader = `
      varying vec3 vColor;
      varying float opacity;
      uniform sampler2D pointTexture;
      void main() {
       gl_FragColor = vec4( vColor, opacity );
       gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); 
      }
      `;
      const shaderMaterial = new THREE.ShaderMaterial({
        uniforms: {
          ...uniforms,
          pointTexture: {
            value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)
          }
        },
        vertexShader,
        fragmentShader,
        blending: THREE.AdditiveBlending,
        depthTest: false,
        transparent: true,
        vertexColors: true
      });
      const geometry = new THREE.BufferGeometry();
      const positions = [];
      const colors = [];
      const sizes = [];
      const phases = [];
      const mIndexs = [];
      const color = new THREE.Color();
      for (let i = 0; i  {
        createSnowSet(sprite);
      });
    }
    function addPlane(scene, uniforms, totalPoints) {
      const vertexShader = `
      attribute float size;
      attribute vec3 customColor;
      varying vec3 vColor;
      void main() {
       vColor = customColor;
       vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
       gl_PointSize = size * ( 300.0 / -mvPosition.z );
       gl_Position = projectionMatrix * mvPosition;
      }
      `;
      const fragmentShader = `
      uniform vec3 color;
      uniform sampler2D pointTexture;
      varying vec3 vColor;
      void main() {
       gl_FragColor = vec4( vColor, 1.0 );
       gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
      }
      `;
      const shaderMaterial = new THREE.ShaderMaterial({
        uniforms: {
          ...uniforms,
          pointTexture: {
            value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)
          }
        },
        vertexShader,
        fragmentShader,
        blending: THREE.AdditiveBlending,
        depthTest: false,
        transparent: true,
        vertexColors: true
      });
      const geometry = new THREE.BufferGeometry();
      const positions = [];
      const colors = [];
      const sizes = [];
      const color = new THREE.Color();
      for (let i = 0; i  {
        const { x, y, z } = camera.position;
        console.log(`camera.position.set(${x},${y},${z})`);
        const { x: a, y: b, z: c } = camera.rotation;
        console.log(`camera.rotation.set(${a},${b},${c})`);
      });
      window.addEventListener(
        "resize",
        () => {
          const width = window.innerWidth;
          const height = window.innerHeight;
          camera.aspect = width / height;
          camera.updateProjectionMatrix();
          renderer.setSize(width, height);
          composer.setSize(width, height);
        },
        false);
    }

CSS实现圣诞树



    
    
    
    圣诞树
    
    
        html,
        body {
            width: 100%;
            height: 100%;
        }
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #020024;
        }
        .word {
            font-size: 22px;
            text-align: center;
            color: gold;
            padding-top: 50px;
            letter-spacing: 5px;
            text-shadow: 2px 4px 9px rgba(255, 255, 255, 0.7);
        }
        /* 圣诞树外层div */
        .tree {
            width: 200px;
            height: 300px;
            margin: 80px auto 0 auto;
            position: relative;
            /*相对定位*/
            /* border: 1px solid #fff; */
        }
        .star {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            top: -25px;
            z-index: 1000;
            left: 50%;
            transform: translate(-50%);
            -webkit-transform: translate(-50%);
            -moz-transform: translate(-50%);
            -ms-transform: translate(-50%);
            -o-transform: translate(-50%);
            animation: starLight 1.5s ease infinite alternate;
            -webkit-animation: starLight 1.5s ease infinite alternate;
        }
        .star-in {
            position: absolute;
            left: 50%;
            top: 50%;
            border-right: 100px solid transparent;
            border-bottom: 70px solid gold;
            border-left: 100px solid transparent;
            transform: translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
            -webkit-transform: translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
            -moz-transform: translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
            -ms-transform: translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
            -o-transform: translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
        }
        .star-in::before {
            border-right: 30px solid transparent;
            border-bottom: 80px solid gold;
            border-left: 30px solid transparent;
            position: absolute;
            top: -45px;
            left: -65px;
            content: '';
            transform: rotate(-35deg);
            -webkit-transform: rotate(-35deg);
            -moz-transform: rotate(-35deg);
            -ms-transform: rotate(-35deg);
            -o-transform: rotate(-35deg);
        }
        .star-in::after {
            border-right: 100px solid transparent;
            border-bottom: 70px solid gold;
            border-left: 100px solid transparent;
            position: absolute;
            top: 3px;
            left: -105px;
            content: '';
            transform: rotate(-70deg);
            -webkit-transform: rotate(-70deg);
            -moz-transform: rotate(-70deg);
            -ms-transform: rotate(-70deg);
            -o-transform: rotate(-70deg);
        }
        @keyframes starLight {
            0% {
                background: radial-gradient(ellipse at center,
                        gold 0%,
                        rgba(255, 240, 158, 0.5)42%,
                        rgba(255, 242, 173, 0.2)58%,
                        rgba(255, 255, 255, 0.1)100%);
            }
            25% {
                background: radial-gradient(ellipse at center,
                        gold 0%,
                        rgba(255, 240, 158, 0.5)40%,
                        rgba(255, 242, 173, 0.2)60%,
                        rgba(255, 255, 255, 0.1)100%);
            }
            50% {
                background: radial-gradient(ellipse at center,
                        gold 0%,
                        rgba(255, 240, 158, 0.5)38%,
                        rgba(255, 242, 173, 0.2)62%,
                        rgba(255, 255, 255, 0.1)100%);
            }
            75% {
                background: radial-gradient(ellipse at center,
                        gold 0%,
                        rgba(255, 240, 158, 0.5)36%,
                        rgba(255, 242, 173, 0.2)64%,
                        rgba(255, 255, 255, 0.1)100%);
            }
            100% {
                background: radial-gradient(ellipse at center,
                        gold 0%,
                        rgba(255, 240, 158, 0.5)34%,
                        rgba(255, 242, 173, 0.2)66%,
                        rgba(255, 255, 255, 0.1)100%);
            }
        }
        .leaf {
            position: absolute;
            left: 50%;
            top: 3%;
            margin-left: -30px;
            background-color: rgba(14, 110, 14);
            width: 60px;
            height: 60px;
            border-radius: 0 10px 35px 10px;
            -webkit-border-radius: 0 10px 35px 10px;
            -moz-border-radius: 0 10px 35px 10px;
            -ms-border-radius: 0 10px 35px 10px;
            -o-border-radius: 0 10px 35px 10px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            box-shadow: 2px 7px 2px rgba(43, 43, 43, 0.2);
        }
        .edge {
            position: absolute;
            left: 0;
            bottom: 0;
            background: rgba(14, 110, 14);
            width: 25px;
            height: 30px;
            border-radius: 0 10px 35px 10px;
            -webkit-border-radius: 0 10px 35px 10px;
            -moz-border-radius: 0 10px 35px 10px;
            -ms-border-radius: 0 10px 35px 10px;
            -o-border-radius: 0 10px 35px 10px;
            transform: translateY(50%) translateX(0);
            -webkit-transform: translateY(50%) translateX(0);
            -moz-transform: translateY(50%) translateX(0);
            -ms-transform: translateY(50%) translateX(0);
            -o-transform: translateY(50%) translateX(0);
        }
        .edge.right {
            position: absolute;
            left: unset;
            bottom: unset;
            top: 0;
            right: 0;
            background: rgba(14, 110, 14);
            width: 25px;
            height: 30px;
            border-radius: 0 10px 35px 10px;
            -webkit-border-radius: 0 10px 35px 10px;
            -moz-border-radius: 0 10px 35px 10px;
            -ms-border-radius: 0 10px 35px 10px;
            -o-border-radius: 0 10px 35px 10px;
            transform: translateY(0) translateX(50%);
            -webkit-transform: translateY(0) translateX(50%);
            -moz-transform: translateY(0) translateX(50%);
            -ms-transform: translateY(0) translateX(50%);
            -o-transform: translateY(0) translateX(50%);
        }
        /* 双数修改背景颜色 */
        .leaf:nth-child(even) {
            background-color: #0f880f;
        }
        .leaf:nth-child(even) .edge {
            background-color: #0f880f;
        }
        /* 最上面 */
        .leaf:nth-child(1) {
            z-index: 100;
            transform: rotate(45deg) scale(0.8);
            -webkit-transform: rotate(45deg) scale(0.8);
            -moz-transform: rotate(45deg) scale(0.8);
            -ms-transform: rotate(45deg) scale(0.8);
            -o-transform: rotate(45deg) scale(0.8);
        }
        /* 第二 */
        .leaf:nth-child(2) {
            z-index: 99;
            top: 15%;
            transform: rotate(45deg) scale(1.3);
            -webkit-transform: rotate(45deg) scale(1.3);
            -moz-transform: rotate(45deg) scale(1.3);
            -ms-transform: rotate(45deg) scale(1.3);
            -o-transform: rotate(45deg) scale(1.3);
        }
        .leaf:nth-child(3) {
            z-index: 98;
            top: 28%;
            transform: rotate(45deg) scale(1.6);
            -webkit-transform: rotate(45deg) scale(1.6);
            -moz-transform: rotate(45deg) scale(1.6);
            -ms-transform: rotate(45deg) scale(1.6);
            -o-transform: rotate(45deg) scale(1.6);
        }
        .leaf:nth-child(4) {
            z-index: 97;
            top: 41%;
            transform: rotate(45deg) scale(1.9);
            -webkit-transform: rotate(45deg) scale(1.9);
            -moz-transform: rotate(45deg) scale(1.9);
            -ms-transform: rotate(45deg) scale(1.9);
            -o-transform: rotate(45deg) scale(1.9);
        }
        .leaf:nth-child(5) {
            z-index: 96;
            top: 54%;
            transform: rotate(45deg) scale(2.2);
            -webkit-transform: rotate(45deg) scale(2.2);
            -moz-transform: rotate(45deg) scale(2.2);
            -ms-transform: rotate(45deg) scale(2.2);
            -o-transform: rotate(45deg) scale(2.2);
        }
        .trunk {
            width: 25px;
            height: 45px;
            border-radius: 0 0 3px 3px;
            -webkit-border-radius: 0 0 3px 3px;
            -moz-border-radius: 0 0 3px 3px;
            -ms-border-radius: 0 0 3px 3px;
            -o-border-radius: 0 0 3px 3px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            bottom: 20px;
            z-index: 1;
            box-shadow: 0 0 10px 5px rgb(19, 19, 19);
            background: linear-gradient(0deg, #6d411b 0%, #5a341d 64%);
        }
        .ball {
            width: 20px;
            height: 20px;
            background: #f00;
            box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            z-index: 101;
            position: absolute;
        }
        .b1 {
            left: 25%;
            top: 30%;
        }
        .b2 {
            left: 35%;
            top: 50%;
        }
        .b3 {
            left: 65%;
            top: 20%;
        }
        .b4 {
            left: 45%;
            top: 22%;
        }
        .b5 {
            left: 40%;
            top: 72%;
        }
        .b6 {
            left: 60%;
            top: 52%;
        }
        .b7 {
            left: 50%;
            top: 62%;
        }
        .b8 {
            left: 80%;
            top: 42%;
        }
        .b9 {
            left: 10%;
            top: 62%;
        }
        .b4,
        .b5,
        .b6 {
            background: #ececec;
            box-shadow: -1px -1px 6px inset #615f5f, 1px 1px 8px inset #fff;
        }
        .b7,
        .b8,
        .b9 {
            background: gold;
            box-shadow: -1px -1px 6px inset #3a3101, 1px 1px 8px inset #fff;
        }
        .sparkle span {
            display: block;
            position: absolute;
            font-size: 20px;
            z-index: 101;
            color: #fff;
            animation: lights 1.5s ease infinite alternate;
            -webkit-animation: lights 1.5s ease infinite alternate;
        }
        /* 闪烁动画 */
        @keyframes lights {
            0%,
            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
            }
            50% {
                transform: scale(1.5);
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
                -ms-transform: scale(1.5);
                -o-transform: scale(1.5);
            }
        }
        .sparkle span:nth-child(1) {
            left: 30%;
            top: 40%;
        }
        .sparkle span:nth-child(2) {
            left: 40%;
            top: 27%;
            font-size: 15px;
        }
        .sparkle span:nth-child(3) {
            left: 50%;
            top: 57%;
            font-size: 12px;
        }
        .sparkle span:nth-child(4) {
            left: 70%;
            top: 67%;
            font-size: 14px;
        }
        .sparkle span:nth-child(5) {
            left: 74%;
            top: 13%;
            font-size: 16px;
        }
        .blink div {
            width: 3px;
            height: 3px;
            background: #fff;
            z-index: 101;
            position: absolute;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            animation: blink 1.5s ease infinite alternate;
            -webkit-animation: blink 1.5s ease infinite alternate;
        }
        .blink div:nth-child(2) {
            left: 34%;
            top: 13%;
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
        }
        .blink div:nth-child(3) {
            left: 54%;
            top: 43%;
            transform: scale(0.6);
            -webkit-transform: scale(0.6);
            -moz-transform: scale(0.6);
            -ms-transform: scale(0.6);
            -o-transform: scale(0.6);
        }
        .blink div:nth-child(4) {
            left: 64%;
            top: 33%;
            transform: scale(1.4);
            -webkit-transform: scale(1.4);
            -moz-transform: scale(1.4);
            -ms-transform: scale(1.4);
            -o-transform: scale(1.4);
        }
        .blink div:nth-child(5) {
            left: 34%;
            top: 63%;
            transform: scale(1.8);
            -webkit-transform: scale(1.8);
            -moz-transform: scale(1.8);
            -ms-transform: scale(1.8);
            -o-transform: scale(1.8);
        }
        .blink div:nth-child(6) {
            left: 14%;
            top: 76%;
            transform: scale(1.5);
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
        }
        @keyframes blink {
            0% {
                box-shadow: 0 0 0 0 #fff;
            }
            25% {
                box-shadow: 0 0 1px 1px #fff;
            }
            50% {
                box-shadow: 0 0 2px 2px #fff;
            }
            75% {
                box-shadow: 0 0 3px 3px #fff;
            }
            100% {
                box-shadow: 0 0 4px 4px #fff;
            }
        }
        .yy {
            position: absolute;
            top: 80%;
            right: 0%;
        }
    


    
        圣诞树
    
    
        
            
        
        
        
            
                
                
            
            
                
                
            
            
                
                
            
            
                
                
            
            
                
                
            
        
        
        
        
        
            
            
            
            
            
            
            
            
            
        
        
        
            ★
            ★
            ★
            ★
            ★
            ★

简易的圣诞树



    
    
    
    
    
    鱼找水的圣诞树
    
    
        body{
            background-color: #020024;
        }
        #app{
            display:flex;
            justify-content:center;
            height: 100vh;
        }
        .shendanshu {
            display: flex;
            justify-content: center;
            width: 1000px;
            max-width: 100vw;
            flex-direction: column;
            align-items: center;
        }
        .shuceng {
            display: flex;
            flex-direction: row;
            overflow: hidden;
            justify-content: center;
        }
        .shuye {
            position: relative;
            height: 46px;
        }
        .ye {
            width: 0;
            height: 0;
            border: 30px solid;
            border-color: transparent transparent green;
            border-top-width: 6px;
        }
        .caideng {
            position: absolute;
            bottom: 0px;
            left: 22px;
            width: 16px;
            height: 16px;
            background: red;
            border-radius: 40px;
            animation: dengguangxiaoguo 1s linear infinite alternate;
        }
        .caideng1{
            animation-delay:-0.25s;
        }
        .caideng2{
            animation-delay:-0.5s;
        }
        .caideng3{
            animation-delay:-0.75s;
        }
        .shugan {
            background-color: #795548;
            height: 60px;
            width: 100px;
        }
        .tudi {
            background: #FFC107;
            height: 20px;
            width: 500px;
            max-width: 80vw;
            border-radius: 20px 20px 0px 0px;
        }
        @keyframes dengguangxiaoguo {
            0% {
                background-color: #fff;
            }
            25% {
                background-color: blue;
            }
            50% {
                background-color: red;
            }
            75% {
                background-color: yellow;
            }
            100% {
                background-color: #fff;
            }
        }
    


    
        
        
            
            
                
                    
                    
                
            
            
            
            
            
                
            
        
    
    
        var app = new Vue({
            el: '#app',
            data: {
                arr_shengdanshu: []
            },
            created: function () {
                for (let i = 0; i  
线性树 
 


    
    
    
    🎄
    
      onload = function() {
        var click_cnt = 0;
        var $html = document.getElementsByTagName("html")[0];
        var $body = document.getElementsByTagName("body")[0];
        $html.onclick = function(e) {
          var $elem = document.createElement("b");
          $elem.style.color = "#E94F06";
          $elem.style.zIndex = 9999;
          $elem.style.position = "absolute";
          $elem.style.select = "none";
          var x = e.pageX;
          var y = e.pageY;
          $elem.style.left = (x - 10) + "px";
          $elem.style.top = (y - 20) + "px";
          clearInterval(anim);
          switch (++click_cnt) {
            case 10:
              $elem.innerText = "OωO";
              break;
            case 20:
              $elem.innerText = "(๑•́ ∀ •̀๑)";
              break;
            case 30:
              $elem.innerText = "(๑•́ ₃ •̀๑)";
              break;
            case 40:
              $elem.innerText = "(๑•̀_•́๑)";
              break;
            case 50:
              $elem.innerText = "（￣へ￣）";
              break;
            case 60:
              $elem.innerText = "(╯°口°)╯(┴—┴";
              break;
            case 70:
              $elem.innerText = "૮( ᵒ̌皿ᵒ̌ )ა";
              break;
            case 80:
              $elem.innerText = "╮(｡>口

The End

标签：

便宜VPS