贺中秋咯~~~提前预祝掘友们中秋快乐

烂橘子妙用2023-09-15 18:03

2023打工人最后的狂欢节日

今年已经过了一半多的日子，想必距离上次放长假的时间已经是上次了，这个上次时间跨度也真是太大太大了，距离今年打工人最后一个超长假期中秋+国庆就要到了！在这里，我提前预祝掘友们假期快乐！

摸鱼无事，写一个中秋贺卡

这个月的活，我已经偷偷提前做完了！

而且！机智的我还没告诉主管听，这样子我在他眼里就是一直在努力工作中！

闲来无事，我用我的摸<・)))><< time为大伙展示一下我练习两年半的前端技术！（主要是让其他同事看到我在敲键盘的努力工作状态！）
话不多说，先看看我两年半的成果（主要功力体现在合理的整合网络资源）

个人感受：我觉得吧，嗯，嗯。嗯！！！是有一点点中秋那味道了，哈哈哈，我也觉得有点丑！

丑是丑了点，但是不影响我做出来！哼哼~~~

做这玩意的时候，我是一边做一边迸发出的idea

先做个星空背景

主要参照codepen里的一个流星制作（抱歉，我找不到那个链接！！！）

先画上一个星空背景，主要是画星星麻烦点而已，主要是在一个dom节点上为他的两个伪类都加渐变背景色和一个 filter background: linear-gradient( -45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0) ); filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));，然后在对这两个伪类稍微旋转一下做成一个X的形状，就OK了！剩下的就是一些简单的动画效果。

css 复制代码 
body {
        position: relative;
        display: flex;
        height: 100vh;
        padding: 0;
        margin: 0;
        justify-content: center;
        align-items: center;
        background: radial-gradient(
          ellipse at bottom,
          #1b2735 0%,
          #090a0f 100%
        );
        overflow: hidden;
        font-family: STKaiti;
      }
HTML 复制代码 
<!--    星空-->
    <div class="stars">
      <div class="big-star"></div>
    </div>
css 复制代码 
 /*星星*/
      .stars {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }

      .meteor,
      .big-star {
        --meteorDuration: 1s;
        position: absolute;
        left: 0%;
        top: 10%;
        width: 100px;
        height: 2px;
        background: linear-gradient(
          -45deg,
          rgba(95, 145, 255, 1),
          rgba(0, 0, 255, 0)
        );
        border-radius: 999px;
        filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
        z-index: -1;
        animation: tail var(--meteorDuration) ease-in-out infinite,
          shooting var(--meteorDuration) ease-in-out infinite;
      }

      .big-star {
        left: 0;
        top: 0;
        background: linear-gradient(
          -45deg,
          rgba(226, 197, 38, 1),
          rgba(252, 219, 42, 0)
        );
        filter: drop-shadow(0 0 6px rgba(252, 219, 42, 1));
        animation: big-tail 2s ease-in-out forwards,
          big-shooting 2s ease-in-out forwards;
      }

      .star {
        --starDuration: 0s;
        --starDelay: 0s;
        --starLeft: 30px;
        --starTop: 20px;
        position: absolute;
        left: var(--starLeft);
        top: var(--starTop);
        width: 1px;
        height: 1px;
        z-index: -1;
        animation: star-flicker var(--starDuration) infinite alternate;
        animation-delay: var(--starDelay);
      }

      .meteor::before,
      .meteor::after {
        --meteorDuration: 1s;
        animation: shining var(--meteorDuration) ease-in-out infinite;
      }

      .meteor::before,
      .star::before,
      .big-star::before {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        width: 30px;
        height: 2px;
        background: linear-gradient(
          -45deg,
          rgba(0, 0, 255, 0),
          rgba(95, 145, 255, 1),
          rgba(0, 0, 255, 0)
        );
        transform: translateX(50%) rotateZ(45deg);
        border-radius: 100%;
      }

      .meteor::after,
      .star::after,
      .big-star::after {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        width: 30px;
        height: 2px;
        background: linear-gradient(
          -45deg,
          rgba(0, 0, 255, 0),
          rgba(95, 145, 255, 1),
          rgba(0, 0, 255, 0)
        );
        border-radius: 100%;
        transform: translateX(50%) rotateZ(-45deg);
      }

      .big-star::before,
      .big-star::after {
        width: 60px;
        height: 4px;
        background: linear-gradient(
          -45deg,
          rgba(252, 219, 42, 0),
          rgba(252, 219, 42, 1),
          rgba(252, 219, 42, 0)
        );
      }
 /*    星星闪烁*/
      @keyframes star-flicker {
        0% {
          box-shadow: 0px 0 10px 0px rgba(105, 155, 255, 0.7);
        }
        100% {
          box-shadow: 0px 0 10px 5px rgba(105, 155, 255, 0.7);
        }
      }
/*    大星星尾巴*/
      @keyframes big-tail {
        0% {
          width: 0;
        }

        30% {
          width: 200px;
        }

        100% {
          width: 0;
        }
      }
/*    星星尾巴动画*/
      @keyframes tail {
        0% {
          width: 0;
        }

        30% {
          width: 100px;
        }

        100% {
          width: 0;
        }
      }
      
      @keyframes shining {
        0% {
          width: 0;
        }

        50% {
          width: 30px;
        }

        100% {
          width: 0;
        }
      }
/*    流星移动*/

      @keyframes shooting {
        0% {
          transform: translate(0, 0) rotateZ(45deg);
        }

        100% {
          transform: translate(800px, 700px) rotateZ(45deg);
        }
      }

      @keyframes big-shooting {
        0% {
          transform: translate(0, 0) rotateZ(15deg);
          opacity: 1;
        }
        90% {
          transform: translate(1000px, 180px) rotateZ(15deg);
          opacity: 1;
        }
        100% {
          transform: translate(1100px, 200px) rotateZ(15deg);
          opacity: 0;
        }
      }

星空这么大，每个星星的位置都不是固定的，，所以星星随机出现在屏幕上才合理嘛！主要是使用setProperty这个方法，为在style中定义的一些变量动态赋随机值

js 复制代码 
// 绘制星星
    function drawStar(count = 100) {
      const fragment = new DocumentFragment();
      for (let i = 0; i < count; i++) {
        const el = document.createElement("div");
        el.classList.add("star");
        el.style.setProperty(
          "top",
          `${(Math.random() * document.body.clientHeight) / 1}px`
        );
        el.style.setProperty(
          "left",
          `${(Math.random() * document.body.clientWidth) / 1}px`
        );
        el.style.setProperty("--starDelay", `${Math.random() * 10}s`);
        el.style.setProperty("--starDuration", `${Math.random() * 10}s`);
        fragment.appendChild(el);
      }
      document.querySelector(".stars").appendChild(fragment);
    }

中秋，中秋，十五的月亮是最圆！当然少不了月亮的绘制！都是没啥难度的小玩意

html 复制代码 
<!--    月亮-->
    <div class="moon">
      <div class="moon-shadow"></div>
      <!--    月亮坑洞-->
      <div class="potHole potHole-1"></div>
      <div class="potHole potHole-2"></div>
      <div class="potHole potHole-3"></div>
      <div class="potHole potHole-4"></div>
      <div class="potHole potHole-5"></div>
    </div>
css 复制代码 
 /*月亮*/
      .moon {
        position: absolute;
        top: 100px;
        left: 1000px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: #fcdb2a;
        box-shadow: 0px 0px 80px 10px rgba(233, 204, 48, 0.8);
        animation: flicker 2s infinite, vibrate 0.3s 2s linear forwards,
          moon-move 1s 2.4s forwards;
      }

      .moon-shadow {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-shadow: inset 30px 30px 10px 10px rgba(0, 0, 0, 0.1);
        border-radius: 50%;
      }

      .potHole {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.3);
        box-shadow: inset 0px 0px 1px 2px rgba(0, 0, 0, 0.3);
      }

      .potHole-1 {
        left: 30px;
        top: 40px;
        width: 40px;
        height: 40px;
      }

      .potHole-2 {
        left: 160px;
        top: 60px;
        width: 20px;
        height: 20px;
      }

      .potHole-3 {
        left: 10px;
        top: 90px;
        width: 30px;
        height: 30px;
      }

      .potHole-4 {
        left: 100px;
        top: 20px;
        width: 20px;
        height: 20px;
      }

      .potHole-5 {
        left: 70px;
        top: 120px;
        width: 45px;
        height: 45px;
      }

      @keyframes moon-move {
        0% {
          top: 100px;
          left: 1000px;
        }
        100% {
          top: 70px;
          left: 1400px;
        }
      }
      @keyframes vibrate {
        0% {
          -webkit-transform: translate(0);
          transform: translate(0);
        }
        20% {
          -webkit-transform: translate(-2px, 2px);
          transform: translate(-2px, 2px);
        }
        40% {
          -webkit-transform: translate(-2px, -2px);
          transform: translate(-2px, -2px);
        }
        60% {
          -webkit-transform: translate(2px, 2px);
          transform: translate(2px, 2px);
        }
        80% {
          -webkit-transform: translate(2px, -2px);
          transform: translate(2px, -2px);
        }
        100% {
          -webkit-transform: translate(0);
          transform: translate(0);
        }
      }

      @keyframes flicker {
        0% {
          box-shadow: 0px 0px 80px 10px rgba(233, 204, 48, 0.8),
            0px 0px 100px 10px rgba(255, 255, 255, 0.8);
        }
        50% {
          box-shadow: 0px 0px 60px 6px rgba(233, 204, 48, 0.8),
            0px 0px 100px 10px rgba(255, 255, 255, 0.8);
        }
        100% {
          box-shadow: 0px 0px 80px 10px rgba(233, 204, 48, 0.8),
            0px 0px 100px 10px rgba(255, 255, 255, 0.8);
        }
      }

中秋嘛，兔子也是少不了的，都是怎么方便怎么做，全部使用定位做的，然后加一些动画罢了，没啥难度，主要就是写CSS

html 复制代码 
<!--    兔子-->
<div class="rabbit-container">
  <div class="rabbit">
    <div class="body">
      <div class="ears">
        <div class="ear ear-1"></div>
        <div class="ear ear-2"></div>
      </div>
      <div class="eyes"></div>
      <div class="blusher"></div>
      <div class="nose"></div>
      <div class="mouth"></div>
      <div class="legs"></div>
      <div class="tail"></div>
    </div>
  </div>
</div>
css 复制代码 
/*    兔子*/
.rabbit-container {
  position: absolute;
  left: -50px;
  top: 400px;
  width: 200px;
  max-height: 200px;
  animation: rabbit-appear 4s 7.7s linear forwards;
  overflow: hidden;
}

.rabbit {
  position: relative;
}

.body {
  position: absolute;
  top: 60px;
  width: 140px;
  height: 100px;
  border-radius: 10px;
  background-color: #ffffff;
  border: 2px solid #000000;
}

/*眼睛 耳朵*/
.ears {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
}

.ear {
  position: relative;
  top: -64px;
  width: 20px;
  height: 60px;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
  border: 2px solid #000000;
}

.ear::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 0;
  left: 6px;
  right: 6px;
  border-radius: 10px 10px 0 0;
  background: #fd908f;
}

.eyes::before,
.eyes::after {
  content: "";
  position: absolute;
  top: 24px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000000;
  animation: blink 7s infinite;
}

.eyes::before {
  left: 35px;
}

.eyes::after {
  right: 35px;
}

@keyframes blink {
  0%,
  9%,
  11%,
  19%,
  21%,
  69%,
  71%,
  100% {
    transform: scaleY(1);
  }
  10%,
  20%,
  70% {
    transform: scaleY(0);
  }
}

/*腮红*/
.blusher::before,
.blusher::after {
  content: "";
  position: absolute;
  top: 45px;
  width: 16px;
  height: 10px;
  border-radius: 20px;
  background: #fd696a;
  box-shadow: 0 0 10px 2px #fd696a;
}

.blusher::before {
  left: 20px;
}

.blusher::after {
  right: 20px;
}

/*    鼻子*/
.nose {
  position: relative;
  background-color: tomato;
}

.nose:before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}

.nose:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.nose:before {
  background-color: #000000;
}

.nose:after {
  background-color: #000000;
}

.nose {
  position: relative;
  top: -6px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: #000000;
  transform: rotate(-45deg) scale(0.07);
}

/*    嘴巴*/
.mouth {
  position: relative;
  left: 2px;
}

.mouth::before,
.mouth::after {
  content: "";
  position: absolute;
  top: -54px;
  width: 4px;
  height: 8px;
  border-radius: 4px;
}

.mouth::before {
  background-color: #000000;
  left: 51%;
  transform: translateX(-50%) rotate(-30deg);
}

.mouth::after {
  background-color: #000000;
  right: 51%;
  transform: translateX(-50%) rotate(30deg);
}

/*    腿*/
.legs {
  position: relative;
}

.legs::before,
.legs::after {
  content: "";
  position: absolute;
  bottom: -24px;
  width: 16px;
  height: 20px;
  border-radius: 0 0 10px 10px;
  background-color: white;
  border: 2px solid #000000;
}

.legs::before {
  left: 40px;
}

.legs::after {
  right: 40px;
}

/*    尾巴*/
.tail {
  position: absolute;
  right: -24px;
  bottom: 10px;
  width: 30px;
  height: 20px;
  border-radius: 0 50% 100% 0 / 0 10px 20px 0;
  background-color: #ffffff;
  border: 2px solid #000000;
  border-left-width: 0;
  animation: wagTail 1s infinite linear;
  z-index: -1;
}

@-webkit-keyframes wagTail {
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rabbit-appear {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

有一说一，月饼当然也必不可少，但是我就没做！至于为什么


（主要是我的<・)))><<来蹭我了，我得摸摸，摸鱼时间摸鱼，很合理吧！）

剩下的就是信封和贺卡的内容了，直接上代码，不想解释了，反正不难

html 复制代码 
<!--信封-->
    <div class="envelope">
      <div class="envelope-body"></div>
      <div class="envelope-head"></div>
      <div class="envelope-content"></div>
      <!--贺卡内容盒子-->
    </div>
    
     <!--    贺词-->
      <div id="greetings" class="content"></div>
css 复制代码 
 /*信封*/
      .envelope {
        position: relative;
        width: 800px;
        height: 400px;
        background: #fcdb2a;
        border-radius: 4px;
        opacity: 0;
        animation: appear 1s 2.5s forwards,
          flip-out-hor-top 0.45s 6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
      }

      .envelope-body {
        position: absolute;
        left: 0;
        top: 0;
        width: 800px;
        height: 400px;
        background: #ded448;
        clip-path: polygon(
          0 0,
          30% 0,
          50% 30%,
          70% 0,
          100% 0,
          100% 100%,
          0 100%
        );
        z-index: 1;
      }

      .envelope-head {
        position: absolute;
        left: 0;
        top: 0;
        width: 800px;
        height: 400px;
        background: #e8cb43;
        clip-path: polygon(0 0, 20% 30%, 50% 50%, 80% 30%, 100% 0);
        z-index: 10;
        animation: swing-top-fwd 2s 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      }

      .envelope-content {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        height: 300px;
        background-color: rgba(234, 152, 7, 1);
      }

      @keyframes appear {
        0% {
          -webkit-transform: scaleY(0);
          transform: scaleY(0);
          opacity: 0;
        }
        100% {
          -webkit-transform: scaleY(1);
          transform: scaleY(1);
          opacity: 1;
        }
      }

      @keyframes swing-top-fwd {
        0% {
          -webkit-transform: rotateX(0);
          transform: rotateX(0);
          -webkit-transform-origin: top;
          transform-origin: top;
        }
        100% {
          -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
          -webkit-transform-origin: top;
          transform-origin: top;
        }
      }

      @keyframes flip-out-hor-top {
        0% {
          transform: rotateX(0);
        }
        100% {
          transform: rotateX(90deg);
        }
      }

      /*贺卡盒子*/
      .container {
        position: absolute;
        width: 800px;
        height: 500px;
        border-radius: 40px;
        padding: 20px;
        background-color: rgba(234, 152, 7, 0.95);
        transform: rotateX(90deg);
        animation: flip-out-hor-top 0.45s 7s
          cubic-bezier(0.55, 0.085, 0.68, 0.53) reverse forwards;
      }

      /*    贺词内容*/
      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #ffffff;
        text-align: center;
      }

      h1 {
        display: inline-block;
        text-align: center;
        overflow: hidden;
        font-size: 40px;
      }

      h1 span,
      p span {
        --delay: 0s;
        display: inline-block;
        overflow: hidden;
        width: 0ch;
        animation: typewriting 0.1s forwards;
        animation-delay: var(--delay);
      }

      p {
        width: fit-content;
        margin: 0 0 10px 0;
        font-size: 30px;
        text-align: center;
        line-height: 1.6;
      }

      /*打字效果*/
      @keyframes typewriting {
        from {
          width: 0ch;
        }
        to {
          width: 2ch;
        }
      }

贺词的打字效果我参照的是这位大佬(CSS 打字特效 - 掘金 (juejin.cn))的，稍微修改下而已

以上都不是为了凑字数，你们懂的！

上效果

WIgAyUhl - 码上掘金 (juejin.cn)

淦！我的码上掘金怎么不是内嵌网页！！！/快捷键无效！

最后

相关推荐
疯狂的沙粒8 分钟前
Vue 前端大屏做多端屏幕适配时，如何让其自动适配多种不同尺寸的屏幕？
前端·javascript·vue.js
范小多12 分钟前
24小时学会Python Visual code +Python Playwright通过谷歌浏览器取控件元素（连载、十一）
服务器·前端·python
ooolmf13 分钟前
matlab2024读取温度01
java·前端·javascript
打工人小夏14 分钟前
前端vue3项目使用nprogress动画组件，实现页面加载动画
前端
一颗宁檬不酸16 分钟前
前端农业商城中产品产地溯源功能的实现
前端
李少兄23 分钟前
深入理解前端中的透视（Perspective）
前端·css
江公望33 分钟前
HTML5 History 模式 5分钟讲清楚
前端·html·html5
云和数据.ChenGuang39 分钟前
Zabbix Web 界面安装时**无法自动创建配置文件 `zabbix.conf.php`** 的问题
前端·zabbix·运维技术·数据库运维工程师·运维教程
码界奇点42 分钟前
Java Web学习 第15篇jQuery万字长文详解从入门到实战解锁前端交互新境界
java·前端·学习·jquery
前端老曹1 小时前
vue3 三级路由无法缓存的终极解决方案
前端·javascript·vue.js·vue
热门推荐
01GitHub 镜像站点02【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）03【AutoGLM部署】本地私有化部署AI手机Agent04UV安装并设置国内源05Open-AutoGLM Windows 安装部署教程06Linux下V2Ray安装配置指南07BongoCat - 跨平台键盘猫动画工具08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser10Windows 11 官方系统安装与重装完整教程（2025年最新版）