PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

One, foreword

On New Year’s Eve, hanging lanterns in front of the door is auspicious meaning of Hong (red) luck. On the lanterns hung on New Year’s eve, they are basically auspicious patterns and auspicious words of blessing.

The red of the lantern is the color of cinnabar, and cinnabar is a treasure with strong efficacy to ward off evil spirits in feng shui. Therefore, there is a tradition of hanging red lanterns on the door during festivals since ancient times.

Second, effect display

Local effect

Global effect

Three, code explanation

To determine the location

We usually hang lanterns on both sides of the door, so we set the position of the lanterns on the left and right side of the page, usually pay attention to good things in pairs, so the lanterns on both sides of the page should be symmetrical and the distance is moderate.

Location of lanterns on the right:

.spring_lantern__deng-box { position: fixed; // Top: -20px; // Top right: -20px; // Right z-index: 99999; }Copy the code

Position of lanterns on the left:

.spring_lantern__deng-box1 { position: fixed; // Top: -10px; // Top left: 10px; // left lantern z-index: 99999; }Copy the code

Draw a lantern

Lantern characters, in order to festival, into the word fu.

Const word = ‘fufu’

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; }Copy the code

Lantern color style:

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)'.Copy the code

Add a Tomb-sweeping spoof lantern and change lines 21 through 29 to enable it again.

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%)', }Copy the code

Results the followingDon’t call me if you get hit

Dynamic effect

Core code:

If (isDown) {// If the lantern is dropped during the swing _spring_lantern_LightUpFlag = false box.style.display = 'block' box1.style.display = 'Block'} if (isUp) {// If the lantern is raised during the swing _spring_lantern_LightUpFlag = true box.style.display = 'none' box1.style.display = 'none' } }Copy the code

Add scripts to web pages

Download the all-powerful Oilmonkey

The above code is just a brief introduction, you just need to download a monkey plug-in I wrote on the line, there is no need to write code.

Click on the link to oilmonkey,

Install user script Manager:

Install the script: because the script is written JS, we want to achieve the lantern effect on their own computer web pages, you need to download the script in the oil monkey to the script manager, and then use. You can search for lanterns in the Oil Monkey plugin, or click on the link below.

Link lantern

Install and use