前一阵做需求时，有个小功能实现起来废了点脑细胞，觉得可以记录一下。 产品的具体诉求是：用户点击按钮进入详情页面，详情页内的卡片标题内容过长时，标题的前后两端正常展示，中间用省略号...表示，并且鼠标悬

这段时间在豆瓣上看有什么剧的时候，发现豆瓣的loading动画还挺棒的。所以决定模仿着来写一个。 我通过CSS3配合SVG来完成这次模仿豆瓣的loading动画。没用过SVG的也不用慌，我下面会写出相应的属性方便你去理解。因为这个真的超简单。那么我们就直奔主题吧 我指定了一个宽…

HTML、CSS、JS实现堆叠照片轮播图片播放动画效果。图片都以堆叠的方式展示，当用户点击某张图片时，平滑移到左侧并旋转展示全貌1s后回到原处并旋转同时层级降低堆到其它图片背后，形成堆叠交错的效果🥪

详细介绍使用HTML、CSS实现玻璃质感卡片悬停效果的技术，当鼠标悬停在图片上时，会渐变显示出现一个玻璃拟态风格的卡片元素，其中展示了更多的内容，同时页面背景颜色也会相对变化。朦胧感和层次感和空间感

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

js中媒体查询的主要方法是使用window对象下的matchMedia对象，查询语句和CSS媒体查询一样。 封装媒体查询 首先我们先看监听系统主题色的例子 首先创建媒体查询对象 根据查询结果设置对应的

最近《狂飙》大火，顺便蹭个热度，用CSS给狂飙做了4种转场过渡效果，分别是水平擦除转场、星型转场、时钟转场，自定义图形缩放转场。同样代码可以丝滑使用，

用原生的 js 实现了钉钉官网的一个动画效果，觉得实现这个效果特别能锻炼人的思维，在不依赖框架、第三方库的情况下，自己使用原生的 js去实现一遍，对自己的提升会非常大，因此我也试着去实现该动画效果

前端主题切换方案 现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家