https://github.com/wangxiaoyugg/special-effect
front end special effect demo
https://github.com/wangxiaoyugg/special-effect
Last synced: about 4 hours ago
JSON representation
front end special effect demo
- Host: GitHub
- URL: https://github.com/wangxiaoyugg/special-effect
- Owner: WangXiaoyugg
- License: mit
- Created: 2019-05-26T09:24:00.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-07-14T14:19:21.000Z (almost 6 years ago)
- Last Synced: 2025-03-22T16:13:20.491Z (3 months ago)
- Language: HTML
- Homepage:
- Size: 2.17 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: change-background/change-background.html
- License: LICENSE
Awesome Lists containing this project
README
# 前端特效
1. 开关，利用checkbox + label + 伪类实现
2. 回到顶部，利用锚点和 html 的scroll-behavior
3. 导航栏，利用伪类实现
4. 按钮hover效果，利用伪类和过渡效果
5. 文字图片背景， 利用 -webkit-fill-color, -webkit-background-clip 实现
6. 发光的文字， 利用animation keyframe，多层阴影叠加，滤镜效果，动画延迟
7. Loading 效果，利用animation， transform-origin的技术
8. 圆形loading, 利用伪类 + animation
9. 背景颜色渐变，利用linear-gradient
10. 搜索框，利用伪类 + transition delay 效果实现
11. 3D卡片翻转，利用perspective 和 rotateY，backface-visibility
12. ripple animation
13. simple text animation, 利用letter-spacing
14. animated login form, 利用 transition 和 focus
15. aniiated loading, 利用 rotate
16. animated AD banner
17. custom scrollbar
18. image hover effect
19. eyes follow
20. sun-earth
21. change body background color
22. typing text
23. random color
24. tab-image-gallery
25. full-landing-page
26. awsome-modal
27. cover-uncover-image
28. custom-search-filter
29. code-review-star
30. love-reaction
31. mouse-scroll
32. folder-corner
33. img-zoom
34. endless-road
35. graident-button
36. jump-text
37. spotlight-effect
## Todo
1. icon 地址使用iconfont 替代国外地址