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

烂橘子妙用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)

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

最后

相关推荐
web135085886359 分钟前
前端node.js
前端·node.js·vim
m0_5127446410 分钟前
极客大挑战2024-web-wp（详细）
android·前端
潜意识起点33 分钟前
精通 CSS 阴影效果：从基础到高级应用
前端·css
奋斗吧程序媛38 分钟前
删除VSCode上 origin/分支名，但GitLab上实际上不存在的分支
前端·vscode
IT女孩儿1 小时前
JavaScript--WebAPI查缺补漏（二）
开发语言·前端·javascript·html·ecmascript
m0_748256563 小时前
如何解决前端发送数据到后端为空的问题
前端
请叫我飞哥@3 小时前
HTML5适配手机
前端·html·html5
@解忧杂货铺5 小时前
前端vue如何实现数字框中通过鼠标滚轮上下滚动增减数字
前端·javascript·vue.js
F-2H6 小时前
C语言：指针4（常量指针和指针常量及动态内存分配）
java·linux·c语言·开发语言·前端·c++
gqkmiss7 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）