/web-magic

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

Primary LanguageCSSMIT LicenseMIT

Web Magic

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

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

web-magic专栏中,你将学会:

  • 创新的用户界面:如何使用前端三剑客创建引人注目的用户界面,让用户在网站上体验变得更加交互和愉悦
  • 酷炫特效与动画:如何使用纯CSS的过渡和动画特性,以及JavaScript库Animate.cssGreenSock等,为网页增添动态效果和吸引力
  • 响应式布局技巧:如何使用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一步步制作全屏滚动进度条指示器🛬