跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 洗牌
搜索

相关文章
mask

29 篇文章
{
,

}
文章的直接链接 单元素加载器:进入 3D 世界!
3d 裁剪路径 渐变 加载器 遮罩

单元素加载器:进入 3D 世界!

在我们这系列关于单元素加载器的文章的第四篇也是最后一篇中,我们将探索 3D 模式。在创建 3D 元素时,很难想象仅仅一个 HTML 元素就足以模拟像立方体的六个面这样的东西。但是,也许我们可以摆脱……

Avatar of Temani Afif
Temani Afif 于 2023 年 8 月 27 日
文章的直接链接 单元素加载器:圆点
背景定位 渐变 加载器 遮罩

单元素加载器:圆点

在本系列文章中,我们正在探讨加载器。更重要的是,我们正在分解一些常见的加载器模式,以及如何使用仅仅一个 div 来重新创建它们。到目前为止,我们已经分解了 经典的旋转加载器。现在,……

Avatar of Temani Afif
Temani Afif 于 2024 年 2 月 15 日
文章的直接链接 单元素加载器:旋转器
动画 渐变 加载器 遮罩 伪元素

单元素加载器:旋转器

制作纯 CSS 加载器是我最喜欢的任务之一。看着那些无限动画总是很令人满足。当然,有很多技术和方法可以制作它们——没必要 查看 CodePen 才能……

Avatar of Temani Afif
Temani Afif 于 2023 年 8 月 27 日
文章的直接链接 使用 CSS 遮罩和裁剪路径属性来节省时间
裁剪路径 CSS 形状 渐变 遮罩

使用 CSS 遮罩和裁剪路径属性来节省时间

我们最近介绍了如何使用 CSS mask 属性创建 花哨的边框,现在我们将使用 CSS mask 和 clip-path 来切割角落!有很多技术可以从任何元素的角落切割不同的形状。……

Avatar of Temani Afif
Temani Afif 于 2022 年 8 月 11 日
文章的直接链接 使用遮罩创建花哨的 CSS 边框(锯齿形、波浪形等等)
边框 渐变 遮罩

使用遮罩创建花哨的 CSS 边框(锯齿形、波浪形等等)

您是否尝试过以重复的锯齿形图案制作 CSS 边框?例如,网站上一个彩色区域的结束和另一个不同彩色区域的开始——不是直线,而是倾斜的锯齿形、圆形的驼峰、……

Avatar of Temani Afif
Temani Afif 于 2023 年 1 月 31 日
文章的直接链接 CSS 化糖果幽灵按钮
背景裁剪 边框图像 按钮 裁剪路径 幽灵按钮 渐变 遮罩 遮罩裁剪 遮罩合成 混合混合模式

CSS 化糖果幽灵按钮

最近,在寻找一些代码的想法时,我发现自己没有任何艺术天赋,所以我唯一能做的就是找到别人想出的漂亮的东西,然后用干净和……的方式重新制作它们。

Avatar of Ana Tudor
Ana Tudor 于 2021 年 10 月 31 日
文章的直接链接 使用 CSS 遮罩和自定义属性实现图像碎片效果
@property CSS 动画 自定义属性 遮罩

使用 CSS 遮罩和自定义属性实现图像碎片效果

Geoff 分享了这个关于 棋盘格,其中瓷砖逐个消失 以显示图像的想法。在其中,一个元素具有背景图像,然后一个 CSS 网格布局包含从填充的背景颜色变为……的“瓷砖”。

Avatar of Temani Afif
Temani Afif 于 2021 年 3 月 23 日
文章的直接链接 clipPath vs. mask
裁剪路径 裁剪与遮罩 遮罩

clipPath vs. mask

这些东西如此相似,我发现很难将它们区分开来。这是 viewBox 的 一个很好的解释(多么酷的名字和 URL,我希望他们能继续使用它)。

最重要的是,clipPath……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 12 月 27 日
文章的直接链接 mask-image
遮罩 遮罩图像

mask-image

CSS 中的 mask 属性允许您隐藏元素的某些部分。例如,如果您有一个黑白图像,您可以将其用作遮罩,黑色部分将强制该元素在该元素上透明。遮罩也可以匹配遮罩图像的 alpha 透明度。
Avatar of Chris Coyier
Chris Coyier 于 2021 年 5 月 10 日
  • 更新
  • 1
  • 2
  • 3
  • ...
  • 4
  • 旧版本

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

使用我们手工制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费信用额度!
CSS-Tricks
  • 为我们写作!
  • 与我们合作广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.