w-95 / web-magic

这个repo通过实际案例来演示如何运用HTML、CSS和JavaScript创建各种互动性、独特性、动感酷炫和视觉效果。

Web Magic

欢迎来到web-magic专栏！在这个repo中，我们将一起探索HTML、CSS和JavaScript的奇妙世界，并创作展示出各种令人惊叹的案例和创意~

• 无论你是一位 初学者 还是 经验丰富 的开发者，本repo都将为你带来灵感和知识。
• 本repo将通过很多实际案例来演示如何运用HTML、CSS和JavaScript创建各种互动性、生动性的触感和视觉效果等。

在web-magic专栏中，你将学会：

• 创新的用户界面：如何使用前端三剑客创建引人注目的用户界面，让用户在网站上体验变得更加交互和愉悦。
• 酷炫特效与动画：如何使用纯CSS的过渡和动画特性，以及JavaScript库如Animate.css和GreenSock等，为网页增添动态效果和吸引力。
• 响应式布局技巧：如何使用CSS的弹性盒子 （flexbox） 和网格布局 （grid） 等技术，使网页在不同设备上自适应并呈现最佳的外观。

总而言之无论你是想提升自己的前端开发技能，还是寻找灵感和创意，web-magic专栏都将为你带来一系列令人惊叹的案例和教程。让我们一同探索这个"魔幻的世界"吧！

目录

1. 脉冲动画效果懒加载图片➕
2. 使用CSS技巧实现图片与卡片交叉处的平滑效果⚪
3. 文本输入/打字机动画效果⌨️
4. Cropper.js - 裁剪并下载图片✂️
5. 创造图片像素化动画效果💥
6. 炫酷的"文字(字母&数字)雨"动画🌧️
7. 创意按钮交互 - 方向感知磁性悬停效果🧲
8. CSS 中的疯狂杂志折叠效果🈁
9. 创意「菜单导航」悬浮交互效果🧇
10. 「输入框」上的占位文本动画效果🌊
11. 水果风味的苏打水轮播图🍓
12. 「3D视觉相册」画廊展示旋转播放走马灯🏮
13. 「滚动绽放」实现页面滚动时逐渐展示/隐藏元素🏳️‍🌈
14. 「登录面板」现代登录/注册页面展示®️
15. 「文本灯光」Text文本上的锥形探照灯动画效果🔦
16. 「流光边框」CSS巧妙实现元素的流动边框动画效果💥
17. CSS轻松实现玻璃拟态质感的卡片与:has()选择器🪟
18. CSS简单实现3D香烟动画🚬
19. 「堆叠照片」张张都是焦点的轮播图片效果🥪
20. 点亮网页的星星粒子动画效果🌟
21. CSS创建loading动画效果🦚
22. CSS选择器创建从平凡到立体的3D独特视觉效果👁️
23. 一切尽在CSS制作卡牌悬停动画效果之中🎴
24. CSS一步步制作全屏滚动进度条指示器🛬