# FrontEndDynamic

**Repository Path**: libaiddd/FrontEndDynamic

## Basic Information

- **Project Name**: FrontEndDynamic
- **Description**: 有趣的动效们( • ̀ω•́ )
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-11-26
- **Last Updated**: 2024-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简述

这里是一些日常积累的有趣动效，尽量只使用 css 和 html。

> (tip:为了文件排序方便，0x09 之后就不 0x0a 了)

## 卡片

### 0x01

#### 演示

![card-effect-0x01](./card/0x01/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/card/0x01)

### 参考

[CSS Creative Card Hover Effects](https://www.youtube.com/watch?v=KFmEjQCyfMw&t=220s)

### 0x02

#### 演示

![card-effect-0x02](./card/0x02/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/card/0x02)

#### 参考

[Pure CSS Quote Box Hover Effects](https://www.youtube.com/watch?v=aK7RQEY30lo)

### 0x03

#### 演示

![card-effect-0x03](./card/0x03/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/card/0x03)

#### 参考

[CSS Quick Cards Hover Effects](https://www.youtube.com/watch?v=F36tmlmnYvg)

### 0x04

#### 演示

![card-effect-0x04](./card/0x04/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/card/0x04)

#### 参考

[3D Flip Card Effect On Hover Using Only HTML & CSS](https://www.youtube.com/watch?v=uR7EbQImYmo)

### 0x05

#### 演示

![card-effect-0x05](./card/0x05/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/card/0x05)

#### 参考

[CSS Card Hover Effects | Html CSS](https://www.youtube.com/watch?v=uXHTMLc6lqI)

### 0x06

#### 演示

![card-effect-0x06](./card/0x06/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/card/0x06)

#### 参考

[CCSS3 Creative Div Box Design | CSS Animation Effects](https://www.youtube.com/watch?v=Gempe3O_yZk)

### 0x07

#### 演示

![card-effect-0x07](./card/0x07/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/card/0x07)

#### 参考

[Cool Hover Effect with Service Seciton in HTML & CSS 3](https://www.youtube.com/watch?v=ZiI5E83yidA)

## Just For Fun

### 0x01

#### 演示

![just-for-fun-0x01](./fun/0x01/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x01)

#### 参考

[CSS Hover Effects](https://www.youtube.com/watch?v=6XbWvDmBmTE)

### 0x02

#### 演示

![just-for-fun-0x02](./fun/0x02/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x02)

#### 参考

[Scrolling Up & Down Indicator Using Html CSS & jQuery](https://www.youtube.com/watch?v=IyfEb1_ZBrI&t=8s)

### 0x03

#### 演示

![just-for-fun-0x03](./fun/0x03/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x03)

#### 参考

[Animated Scroll To Top Button Using Html CSS & jQuery](https://www.youtube.com/watch?v=pu_VwRtpRb0)

### 0x04

#### 演示

![just-for-fun-0x04](./fun/0x04/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x04)

#### 参考

[Flip Background Hover Effects | Html CSS and jQuery](https://www.youtube.com/watch?v=5aYjCD7Ickk)

### 0x05

#### 演示

![just-for-fun-0x05](./fun/0x05/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x05)

#### 参考

[Glowing Gradient Loader Ring Animation Effects | CSS Animation Tutorial](https://www.youtube.com/watch?v=jThaNv8pKDQ)

### 0x06

#### 演示

![just-for-fun-0x06](./fun/0x06/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x06)

#### 参考

[Awesome Product Card Using HTML CSS & JQuery](https://www.youtube.com/watch?v=7hDklEEnP1I&t=25s)

### 0x07

#### 演示

![just-for-fun-0x07](./fun/0x07/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x07)

#### 参考

[CSS Custom Range Slider | Html CSS and Javascript](https://www.youtube.com/watch?v=Q5wxFtLpkKw)

### 0x08

#### 演示

![just-for-fun-0x08](./fun/0x08/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x08)

#### 参考

[Working Analog Clock Using Html5 CSS3 & Javascript](https://www.youtube.com/watch?v=94TKO4eKfIA)

### 0x09

#### 演示

![just-for-fun-0x09](./fun/0x09/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x09)

#### 参考

[CSS TikTok Text Animation Effects | CSS Animation](https://www.youtube.com/watch?v=NtULqtNusGU)

### 0x10

#### 演示

![just-for-fun-0x10](./fun/0x10/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x10)

#### 参考

[Click And Hold Effects | Html CSS & Javascript | CSS Animation](https://www.youtube.com/watch?v=ut5KlHABVC8)

### 0x11

#### 演示

![just-for-fun-0x11](./fun/0x11/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x11)

#### 参考

[Animated Eyes Follow Mouse Cusror | Javascript Mousemove](https://www.youtube.com/watch?v=WqgKe3dcXxg)

### 0x12

#### 演示

![just-for-fun-0x12](./fun/0x12/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x12)

#### 参考

[CSS 3D Video Cube Using Html and CSS](https://www.youtube.com/watch?v=D_8ZhbQQThE)

### 0x13

#### 演示

![just-for-fun-0x13](./fun/0x13/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x13)

#### 参考

[Creative Page Scroll Progress Bar | Html CSS & jQuery](https://www.youtube.com/watch?v=5esbQmw-SA0&t=19s)

### 0x14

#### 演示

![just-for-fun-0x14](./fun/0x14/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/fun/0x14)

#### 参考

[CSS3 Gooey Animation Effects | jQuery Only For Draggble Element](https://www.youtube.com/watch?v=0gYy73USS1M)

## 表单

### 0x01

#### 演示

![form-0x01](./form/0x01/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/form/0x01)

#### 参考

[Animated Login Form Using HTML & CSS & JQurey](https://www.youtube.com/watch?v=ZvU57lTnNgo)

### 0x02

#### 演示

![form-0x02](./form/0x02/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/form/0x02)

#### 参考

[Login Form in Html CSS | Floating placeholder Using Html and CSS Only](https://www.youtube.com/watch?v=hlGLAk09E-8)

### 0x03

#### 演示

![form-0x03](./form/0x03/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/form/0x03)

#### 参考

[Animated Login Form Using Only HTML & CSS](https://www.youtube.com/watch?v=HV7DtH3J2PU)

### 0x04

#### 演示

![form-0x04](./form/0x04/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/form/0x04)

#### 参考

[[HTML+CSS+JS]快速实现漂亮登录注册界面](https://www.bilibili.com/video/av59510948)

### 0x05

#### 演示

![form-0x05](./form/0x05/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/form/0x05)

#### 参考

[Responsive transparent login page (login form) using html and css](https://www.youtube.com/watch?v=PVxtSmOuyLs&t=5s)

### 0x06

#### 演示

![form-0x06](./form/0x06/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/form/0x06)

#### 参考

[CSS3 Creative Check List | Custom Checkbox using CSS](https://www.youtube.com/watch?v=paivur01Z78)

## 菜单

### 0x01

#### 演示

![menu-0x01](./menu/0x01/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/menu/0x01)

#### 参考

[Awesome accordion menu using only HTML & CSS](https://www.youtube.com/watch?v=gnyYpX2nc1g)

### 0x02

#### 演示

![menu-0x02](./menu/0x02/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/menu/0x02)

#### 参考

[Transforming Menu Icon With Labels - Animated Transforming Toggle Menu Effect Tutorials](https://www.youtube.com/watch?v=b0KAUs6zW2U)

### 0x03

#### 演示

![menu-0x03](./menu/0x03/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/menu/0x03)

#### 参考

[CSS3 Creative Menu Item Hover Effects | Layered Text Effects](https://www.youtube.com/watch?v=-zz1EV35WK0)

## 按钮

### 0x01

#### 演示

![button-0x01](./button/0x01/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/button/0x01)

#### 参考

[Buttons With Awesome Hover Effects Using Only HTML & CSS](https://www.youtube.com/watch?v=MLfAW55_4cY)

### 0x02

#### 演示

![button-0x02](./button/0x02/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/button/0x02)

#### 参考

[Creative Button Animation Effects 2 | CSS Snake Border Hover Effect](https://www.youtube.com/watch?v=syQlwv8k0ig)

### 0x03

#### 演示

![button-0x03](./button/0x03/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/button/0x03)

#### 参考

[Social Media Buttons With Awesome Hover Effects](https://www.youtube.com/watch?v=WESIes0U_ds)

### 0x04

#### 演示

![button-0x04](./button/0x04/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/button/0x04)

#### 参考

[Pure CSS Liquid Button Animation Effects | Creative Button Animation Effects](https://www.youtube.com/watch?v=wjHTKLstbRg)

### 0x05

#### 演示

![button-0x05](./button/0x05/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/button/0x05)

#### 参考

[Pure CSS Liquid Button Animation Effects | Creative Button Animation Effects](https://www.youtube.com/watch?v=kwrgKJzsgGE)

### 0x06

#### 演示

![button-0x06](./button/0x06/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/button/0x06)

#### 参考

[CSS Custom Checkbox Design | Html CSS](https://www.youtube.com/watch?v=tVL7Au0B1Cs)

### 0x07

#### 演示

![button-0x07](./button/0x07/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/button/0x07)

#### 参考

[Animated Share Button Using Only HTML & CSS](https://www.youtube.com/watch?v=uiBwb1MoRno&t=20s)

### 0x08

#### 演示

![button-0x08](./button/0x08/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/button/0x08)

#### 参考

[Awesome CSS Search Box Using Only HTML & CSS](https://www.youtube.com/watch?v=v1PeTDrw6OY&t=25s)

### 0x09

#### 演示

![button-0x09](./button/0x09/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/button/0x09)

#### 参考

[[HTML+CSS+JS]快速实现炫酷动画效果登录按钮](https://www.bilibili.com/video/av58709312)

## 加载

### 0x01

#### 演示

![loding-effect-0x01](./loading/0x01/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/loading/0x01)

### 参考

[Quick SVG Loader Animation Effects | CSS Animation](https://www.youtube.com/watch?v=X5VMxWBgm4k)

### 0x02

#### 演示

![loding-effect-0x02](./loading/0x02/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/loading/0x02)

### 参考

[CSS Loading Page Animation Effects | Html and CSS](https://www.youtube.com/watch?v=Xj92bJHzeGw&t=9s)

### 0x03

#### 演示

![loding-effect-0x03](./loading/0x03/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/loading/0x03)

### 参考

[Number Counter Preloader Using Html CSS & Jquery](https://www.youtube.com/watch?v=LaL26USrvsI)

### 0x04

#### 演示

![loding-effect-0x04](./loading/0x04/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/loading/0x04)

### 参考

[CSS3 Snake Border Loading Animation Effects 2](https://www.youtube.com/watch?v=jt4dOkrtaxw)

## 输入框

### 0x01

#### 演示

![input-effect-0x01](./input/0x01/static/img/gif/effect.gif)

### 源码

[Source Code](https://github.com/Yearth/FrontEndDynamic/tree/master/input/0x01)

### 参考

[jQuery Number Spinner - Very Simple jQuery Plugins Tutorial - jQuery Plus Minus Input Incrementer](https://www.youtube.com/watch?v=9KpDZq9zMR4)