欢迎来到web-magic
专栏!在这个repo
中,我们将一起探索HTML
、CSS
和JavaScript
的奇妙世界,并创作展示出各种令人惊叹的案例和创意~
- 无论你是一位 初学者 还是 经验丰富 的开发者,本
repo
都将为你带来灵感和知识。 - 本
repo
将通过很多实际案例来演示如何运用HTML
、CSS
和JavaScript
创建各种互动性、生动性的触感和视觉效果等。
在web-magic
专栏中,你将学会:
- 创新的用户界面:如何使用前端三剑客创建引人注目的用户界面,让用户在网站上体验变得更加交互和愉悦。
- 酷炫特效与动画:如何使用纯CSS的过渡和动画特性,以及
JavaScript库
如Animate.css
和GreenSock
等,为网页增添动态效果和吸引力。 - 响应式布局技巧:如何使用CSS的弹性盒子 (flexbox) 和网格布局 (grid) 等技术,使网页在不同设备上自适应并呈现最佳的外观。
总而言之无论你是想提升自己的前端开发技能,还是寻找灵感和创意,web-magic
专栏都将为你带来一系列令人惊叹的案例和教程。让我们一同探索这个"魔幻的世界"
吧!
- 脉冲动画效果懒加载图片➕
- 使用CSS技巧实现图片与卡片交叉处的平滑效果⚪
- 文本输入/打字机动画效果⌨️
Cropper.js
- 裁剪并下载图片✂️- 创造图片像素化动画效果💥
- 炫酷的"文字(字母&数字)雨"动画🌧️
- 创意按钮交互 - 方向感知磁性悬停效果🧲
- CSS 中的疯狂杂志折叠效果🈁
- 创意「菜单导航」悬浮交互效果🧇
- 「输入框」上的占位文本动画效果🌊
- 水果风味的苏打水轮播图🍓
- 「3D视觉相册」画廊展示旋转播放走马灯🏮
- 「滚动绽放」实现页面滚动时逐渐展示/隐藏元素🏳️🌈
- 「登录面板」现代登录/注册页面展示®️
- 「文本灯光」Text文本上的锥形探照灯动画效果🔦
- 「流光边框」CSS巧妙实现元素的流动边框动画效果💥
- CSS轻松实现玻璃拟态质感的卡片与:has()选择器🪟
- CSS简单实现3D香烟动画🚬
- 「堆叠照片」张张都是焦点的轮播图片效果🥪
- 点亮网页的星星粒子动画效果🌟
- CSS创建loading动画效果🦚
- CSS选择器创建从平凡到立体的3D独特视觉效果👁️
- 一切尽在CSS制作卡牌悬停动画效果之中🎴
- CSS一步步制作全屏滚动进度条指示器🛬