摘要:
本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们详细介绍了 CSS Painting API 是如何一步一步,实现自定义图案甚至实现动画效果的! 阅读全文
摘要:
在上一篇文章中 -- 现代 CSS 之高阶图片渐隐消失术,我们借助了 CSS @Property 及 CSS Mask 属性,成功的实现了这样一种图片渐变消失的效果: CodePen Demo -- 基于 @property 和 mask 的文本渐隐消失术 但是,这个效果的缺陷也非常明显,虽然借助了 阅读全文
摘要:
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: <div class="img"></div> div { width: 300px; height: 300px; background: url(image.jpg); transition: .4s; } .i 阅读全文
摘要:
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样: 当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。 像是这样,我们仅仅需要给 HTML 添加一个统一的滤镜即可: html { filter: grayscal 阅读全文
摘要:
对 Chrome 扩展功能熟悉的小伙伴,可能都有用过 Chrome 的 3D 展示页面层级关系这个功能。 可以通过 控制台 --> 右边的三个小点 --> More Tools --> Layers 打开。即可以看到页面的一个 3D 层级关系,像是这样: 这个功能有几个不错的作用: 页面层级概览 快 阅读全文
摘要:
大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里表示的是与屏幕宽度相关的样式设置,上面的代码表示当屏幕宽度大于 900px 时,内部的样式代码块才能 阅读全文
摘要:
在 CSS 中,渐变(Gradient)可谓是最为强大的一个属性之一。 但是,经常有同学在使用渐变的过程中会遇到渐变图形产生的锯齿问题。 何为渐变锯齿? 那么,什么是渐变图形产生的锯齿呢? 简单的一个 DEMO: <div></div> div { width: 500px; height: 100 阅读全文
摘要:
每年的苹果新产品发布,其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思,今年 iPhone 14 Pro 的介绍页不例外。 最近,刚好有朋友问到,其对官网的一段文字特效特别感兴趣,看适用简单却不知从何下手,我们来看看: 整个动画大致是,随着页面的向下滚动,整个文字从无到出现,再 阅读全文
摘要:
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互。 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。 在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随,我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果,像是这样: 但是,可以看到,上 阅读全文
摘要:
今天在论坛,有看到这样一道非常有意思的题目,简单的代码如下: <div> <p id="a">First Paragraph</p> </div> 样式如下: p#a { color: green; } div::first-line { color: blue; } 试问,标签 <p> 内的文字的 阅读全文