200行JS代码为你的网页挂上红灯笼

最新推荐文章于 2024-04-19 09:24:29 发布

阿舒带你学编程

最新推荐文章于 2024-04-19 09:24:29 发布

阅读量132

点赞数

分类专栏：前端 html 文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/m0_55613022/article/details/123339494

版权

前端同时被 2 个专栏收录

52 篇文章 6 订阅

订阅专栏

html

52 篇文章 0 订阅

订阅专栏

本文介绍如何使用HTML5、CSS3和JavaScript在网页上创建动态的灯笼效果，包括灯笼的位置设定、绘制及动态摇摆效果，并提供了一个清明节恶搞版本。通过下载油猴插件，用户可以轻松将灯笼脚本添加到网页中，为节日增添喜庆气氛。

摘要由CSDN通过智能技术生成

一、前言

除夕夜，在门前挂上灯笼有鸿（红）运当头的吉祥寓意，逢年过节挂的灯笼上，基本都是吉祥的图案和祝福的吉祥话。
而灯笼的正红色是朱砂的颜色，而朱砂是风水上讲去邪挡煞效力极强的宝物，所以自古逢年过节，就有在大门上挂红色灯笼的传统。

二、效果展示

局部效果

全局效果

三、代码讲解

1.确定位置

我们平常挂灯笼一般是挂在大门的两侧，所以我们把灯笼的位置确定在网页的左侧和右侧，平时讲究好事成双，所以网页两侧的灯笼要对称，距离适中。

右侧的灯笼位置：

.spring_lantern__deng-box {
position: fixed;//固定位置
top: -20px;//最顶端
right: -20px;//右侧
z-index: 99999;
}

左侧的灯笼位置：

.spring_lantern__deng-box1 {
 position: fixed;//固定位置
 top: -10px;//顶端
 left: 10px;//左侧灯笼
 z-index: 99999;
}

2.绘制灯笼

灯笼文字，为了喜庆，改成福字。

文字样式const word = ‘福福’

.spring_lantern__deng-t {
 font-family: 华文行楷,华文楷体,Arial,Lucida Grande,Tahoma,sans-serif;
 font-size: 53px !important;
 color: ${colors.suiLight};
 font-weight: bold;
 line-height: 85px;
 text-align: center;
 user-select:none;
}

灯笼颜色样式：

const colors = {
    suiLight: '#dc8f03',
    suiDark: '#ffa500',
    deng_box_shadow: 'rgba(250, 108, 0, 1)',
    r1: 'rgba(216, 0, 15, 0.8)',
    r2: 'rgba(216, 0, 15, 0.1)',

附加一个清明恶搞灯笼，更改第21到29行的代码，使之重新启用，被打别找我。

喜迎清明，黑白分明
  const colors = {
    suiLight: '#ffffff',
    suiDark: '#9b9b9a',
    deng_box_shadow: 'rgb(74,74,74)',
    r1: 'rgba(16, 16, 16, 80%)',
    r2: 'rgba(16, 16, 16, 10%)',
  }

效果图：

3.动态效果

核心代码：

    if (isDown) {//如果灯笼在摇摆的过程中下降
      _spring_lantern_LightUpFlag = false
      box.style.display = 'block'
      box1.style.display = 'block'
    }
    if (isUp) {//如果灯笼在摇摆的过程中上升
      _spring_lantern_LightUpFlag = true
      box.style.display = 'none'
      box1.style.display = 'none'
    }
  }