大家好，我是 Steven，这几天终于感受到冬天真的要来了，我都有些感冒，所以大家要注意保暖喔。 制作的原理和秋季的版本也差不多，那我们今集就将这个冬天的头图实现出来啦。 class 名为 evening，以及窗框积雪效果的图片，class 名为 window-cover。 再…

大家好，我是 Steven。 今期我们会介绍怎样实现 BiliBili 秋季 的那个顶部图片横幅效果，当游标移过去的时候，随着左右移动，会有景深和对焦的效果。 打开 CodePen 编辑器，在 HTML 的部份加入一个 <header> 标签，然后里面加入六个 &#x…

CSS水波纹实现，使用了border-radius属性，构造一个接近圆的不规则图形，然后使用动画，让其绕Z轴不断旋转，以达到一种波浪运动的视觉效果。

margin: auto 解决了 让一个 正常布局流(normal flow) 中 固定宽度 的 块 元素 水平 居中 的问题，其原理就是：在 writing-mode: horizontal-tb 和 direction: ltr 的前提下，当我们给一个块元素设置 margi…