# Bilibili Banner

**Repository Path**: bunnyteemo/bilibili-banner

## Basic Information

- **Project Name**: Bilibili Banner
- **Description**: 每一期的B站首页Banner！
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 28
- **Created**: 2025-05-16
- **Last Updated**: 2025-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Bilibili Seasonal Banner Display

This is a project showcasing Bilibili seasonal theme banners, featuring animated banners for spring, summer, autumn, and winter. Implemented using Angular, React, and Vue frameworks, it caters to developers working with different frontend technology stacks.

## Project Structure

- **angular**: Seasonal banner display implemented with Angular.
- **react**: Seasonal banner display implemented with React.
- **vue**: Seasonal banner display implemented with Vue.

Each framework directory contains multiple components, each corresponding to banner animation effects for different seasons.

## Features

- Provides animated banners for multiple seasonal themes.
- Supports responsive design to adapt to various screen sizes.
- Built with modern frontend frameworks (Angular, React, Vue) for easy integration into existing projects.
- Includes banners in multiple media formats: static images, GIFs, and videos.

## Usage

### Angular Project

1. Navigate to the `angular` directory.
2. Install dependencies: `npm install`
3. Start the development server: `ng serve`
4. Open your browser and visit: `http://localhost:4200/`

### React Project

1. Navigate to the `react` directory.
2. Install dependencies: `npm install`
3. Start the development server: `npm start`
4. Open your browser and visit: `http://localhost:3000/`

### Vue Project

1. Navigate to the `vue` directory.
2. Install dependencies: `npm install`
3. Start the development server: `npm run dev`
4. Open your browser and visit: `http://localhost:5173/`

## Technical Implementation

- **Angular**: Utilizes Angular’s component-based architecture with `*ngFor` to dynamically render banner elements.
- **React**: Employs React functional components and Hooks for state management, rendering the banner list via `map`.
- **Vue**: Implements banner animations using Vue 3’s Composition API.

## Contributors

Pull requests are welcome to improve the project. Please ensure adherence to the project’s code style and include necessary tests.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.