In the first sentence of the body, add “PK creativity makes Spring Festival, I am participating in the” Spring Festival Creativity Submission Contest “. For details, please see: Spring Festival Creativity Submission Contest.

Time flies, time flies, and soon to the New Year, also put a holiday. I used CSS to write a fireworks effect, this minimalist version of fireworks, I built with Vite2 and VUe2. As far as I know, Vite2 only supports vue3 project creation (if it is supported now, please let me know ~ thanks), so I tried to create VUe2 with Vite and wrote a DOEM to share with you ~ and fireworks effect, no extra JS.

Effect:

This is a minimalist version, the implementation effect is very simple!

Initialize the Vue2 project:

npm init vite@latest
Copy the code

If you are using Vite for the first time, you will be asked if you want to continue.

After that, you just need to enter the project name, and the new project here is called ChatRoom.

Note: this small ChatRoom project is for me to make a ChatRoom

This is the address of my project. If you are interested, you can go to my Github and pull it down. You can see the effect by running the front and the back respectively. (Readme.md has instructions on how to run it)

Hope you can give a Star many thanks ~

After completing the above steps, select the following project to create.

Vanilla will be selected here, and then the question will be asked whether to choose the original or TS. You can choose according to your own needs.

The project catalog is as follows:

Note: this does not include server, SRC, only main.js.

Install plug-ins supported by Vite for VUe2

To run the vue2 project in Vite, you need to install a vite plugin: vite-plugin-vue2

npm install vite-plugin-vue2 --dev
Copy the code

If NPM cannot be installed, use CNPM or YARN.

To use the Vite plug-in, you need to create a vite.config.js file in the root directory of your project.

Type the following code in viet.config.js.

import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [createVuePlugin()]
}
Copy the code

Introduce the viet-plugin-vue2 plug-in and register it with the plug-in registration method provided by Vite.

Install vUE dependencies

npm install vue -S
npm install vue-template-compiler
Copy the code

Modify project file dependencies

1. Create a SRC directory under the project root directory.

2, Then move main.js to the SRC directory

3. After the project starts, the entry file is index. HTML, and index. HTML originally introduced main.js, so we need to modify the pointing of the index. HTML file.

4. Create the app. vue file and enter the following code

This step of the code is a bit like the 'main.js' operation in a project created using' vue-cli '.Copy the code

6, after the previous steps of configuration, run the command to run the project.

npm run dev
Copy the code

Next we write about New Year’s fireworks!

First we set up a Vue page:

<template>
  <div>
    <div id="container">
      <div id="fireworks"><img src="./imgs/fireworks.png" alt=""></div>
      <div id="firecracker"><img src="./imgs/firecracker.png" alt="" width="8px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "yanhua"
}
</script>
Copy the code

The key CSS:

<style> html, body { width: 100%; height: 100%; background-color: black; } #container { width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; position: relative; } #fireworks { transform: scale(0); /* Parameters: name, duration, delay */ /* Specifies the name of the keyframe to bind to the selector. Specifies the time, in seconds or milliseconds, to complete the animation. Specifies the delay before the animation begins. animation: fireworks 3s 2s infinite; */ */ animation: fireworks 3s 2s infinite; } /* You can create animations using the @keyframes rule. Animations are created by gradually changing from one CSS style setting to another. During animation, you can change the CSS style Settings many times. Use % when specifying changes to occur, or the keywords "from" and "to", which are the same as 0% to 100%. 0% is the beginning animation, 100% is when the animation is finished. For best browser support, you should always define 0% and 100% selectors. Note: The animation property is used to control the appearance of the animation, and the selector is used to bind the animation. . */ @keyframes fireworks { 0% { transform: scale(0); } 80% { transform: scale(1); } 100% { opacity: 0; } } #firecracker { position: absolute; left: 50%; bottom: auto; margin-left: -4px; animation: firecracker 3s infinite; } @keyframes firecracker { 0% { transform: scale(1); bottom: 0%; } 100% { bottom: 60%; transform: scale(0); } } </style>Copy the code

After that, we can open the vUE page in the project and see the effect of fireworks ~ very, very simple ~