今天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。 我们都知道，到今天（2020/03/06），CSS 提供了两种方式便于我们进行文本超长的打点省略。 基于上述的超长打点省略方案之下，会有一些变化的需求。譬如，我们有如下结构： 对于上述超出的情况，我们希望对于超…

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

前段时间笔者收到可爱漂亮的小册姐姐的邀请，做了人生首次直播分享。分享主题是《玩转CSS的艺术之美》，跟笔者在9月底发布的掘金小册同名。 9月底发布的玩转CSS的艺术之美，首日预售就达到709本，预售仅三日就破1000本。这也让笔者感到惊讶，没想到CSS技术还是那么受倔友们的欢迎…

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景…

本文聊一聊线性渐变的凹面矩形过渡动效的难点和思路，主要介绍凹面矩形实现、给凹面矩形加线性渐变、线性渐变背景色的过渡。如果有更好的实现方案，欢迎在评论区和我讨论。 使用radial-gradient径向渐变来实现，将渐变的模糊距离缩小到0就能看到清晰的圆形界限。 径向渐变如果模糊…

前两天在浏览 苹果 16寸 营销页面 的时候，发现了几个比较有意思的交互，心里想着自己虽然是一个穷逼，但是知识是无界限的呀，于是便研究了一波。 一个是屏幕慢慢打开的效果，在屏幕打开的过程中，电脑图片 是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让 电脑图片 随着滚动条…

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。 另外这里，老姚谢谢各位一如既往的支…

大家好，这里是CSS魔法使——alphardex。 “密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。玩家常常会被困在一间密室中，而过关的目的就是想法设法逃出这件密室。以下是笔者玩的最早的一个密室逃脱游戏——深红房间，它也可以说是密室逃脱…

48张图带你从0到1掌握flex布局方式。 需要本文的Xmind导图的话，移步公众号--前端UpUp,回复flex关键字即可。 从上面图来看，我们将flex布局分为两部分讲，轴和容器。 打个预防针，flex布局涉及到12个CSS属性，父容器,子容器各6个。 接下来先梳理常见的属…