# css50project50days

**Repository Path**: PapillonOfLee/css50project50days

## Basic Information

- **Project Name**: css50project50days
- **Description**: 50个css项目
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-01
- **Last Updated**: 2023-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 50 CSS Project Challenge

## 0. Introduction

This is a repository for the 50 CSS Project Challenge.

The challenge is to create 50 projects using Vue3 Composition API.

This project are inspired by the [50 Projects in 50 Days](https://www.bilibili.com/video/BV1xG411n7d8/) course by [乔木真言](https://space.bilibili.com/688238053).

## 1. Expanding Cards

1. Learn how to use `transition` and `transform` to create a simple animation.
2. Learn how to use `:style` and `:class` to dynamically change the style of an element.
3. Learn how to use `@click` to add event listener to an element.

## 2. Progress Steps

1. Learn how to use `watch` and set `{deep: true}` to watch for changes in nested objects.
2. Learn how to use `:root` to set global CSS variables.
3. Learn how to use `:style="{ '--progress-percent': progressPercent }"` to dynamically change the value of CSS variables.
4. Learn how to use `::before` and `::after` to create pseudo-elements.