最近看到有小伙伴发了一个小米 SU7 的展示网页，那是相当的酷炫。花了几天功夫，我将上面的特效给还原了出来。

基于css3写出来的一个底部导航栏效果，配合js形成了这种点击效果，如图。，然后通过一些css3的阴影等效果完成了如图的设计，文章内含有详细的注释

详细介绍纯CSS和JS创建漂亮的波浪输入框占位文本动画：逐字显示、颜色渐变和波浪上移的动态效果。为网页提供生动、有趣的输入体验用户在输入时获得更好的视觉反馈。贝塞尔函数给过渡效果带来平滑和流畅的感觉

使用HTML、CSS和 JS创建方向感知磁性悬停按钮，使扩展的圆圈在用户的光标移动到按钮区域内时跟随光标，从而创建出磁性效果，CSS提供视觉方面，而JS添加了动态，有趣的交互为界面添加了活泼的触感

coco大佬利用 `mask` 和 `@property` 做出图片像素化渐隐的效果实在是炫酷，正好现在没项目在摸鱼，脑子一抽开始用 `nuxt3` 写个人博客，正好首屏展示用得上

为了向大家介绍 CSS 新特性【scroll-timeline】的强大效果，我特意破解了钉钉首页的动效，莫辜负！

最近有些事情，断更了几天，朝着连续更文14天继续努力 今天分享一个用Turn.js 实现的移动端电子书翻页项目。 先来看一下效果： 关于Turn.js 它是一个轻量级的 (15kb) jQuery/h

使用 turn.js 可以实现仿真翻书的效果。turn.js 是一个开源的 JavaScript 库，它提供了一种简单的方式来创建具有翻书效果的网页。

说到元素拖拽，通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋