ChokCoco

摘要： 背景 在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？ 本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 CSS 如何尽可能的实现它们。 先让我们来看看这些经常会出现的按钮形状： 矩形与圆角按钮 正常而言，我 阅读全文

摘要： 背景 在上一篇 巧用滤镜实现高级感拉满的文字快闪切换效果 中，我们提到了一种非常有意思的之前苹果展示文字的动画效果。 本文，会带来另外一个有意思的效果，巧用渐变实现高级感拉满的背景光动画。此效果运用在苹果官网 iPhone 13 Pro 的介绍页中： 实现 这个效果想利用 CSS 完全复制是比较困难 阅读全文

摘要： 今天偶然看到这样一类很有意思的文字快闪动画： 这类文字快闪切换效果运用得当的话，能比较好的吸引用户的眼球。 当然，今天并非是想用 CSS 实现上述的的效果。在尝试的过程中，我发现了另外一类能够使用 CSS 非常轻松实现文字快闪动画，运用了blur() 滤镜和 contrast() 滤镜产生的融合效果 阅读全文

摘要： 背景 周末在家习惯性登陆 Apex，准备玩几盘。在登陆加速器的过程中，发现加速器到期了。 我一直用的腾讯网游加速器，然而点击充值按钮，提示最近客户端升级改造，暂不支持充值（这个操作把我震惊了~）。只能转头下载网易 UU 加速器。 打开 UU 加速器首页，映入眼帘的是这样一幅画面： 瞬间，被它这个背景 阅读全文

摘要： 本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式，通过本文，你可能可以学会： 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 <progress> 创建进度条 HTML 实现进度条的局限性 使用 CSS 百分比、渐变创建普通进度条及其动画 使 阅读全文

摘要： 本文将通过一个实际的业务需求，讲解如何实现 极端场景下文字加粗加边框效果 文字多重边框的效果 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题： 在文字展示的时候，利用了 font-weight: bold 给文字进行加粗，但是觉得还是不够粗，有什么办法能够让文字更粗一点呢？ emm，不考 阅读全文

摘要： 本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel，并且介绍如何更好地利用这个面板。通过 CSS Overview Panel，可能可以帮助我们： 更准确（高保真）的还原设计稿，辅助设计走查环节 更好的精简我们的 CSS 代码 辅助进行网站的可访问性提升 对网站样 阅读全文

摘要： 本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow()，实现对 HTML 元素及 SVG 元素的部分添加阴影效果，以实现一种酷炫的光影效果，用于各种不同的场景之中。通过本文，你可以学到： 如何利用 filter: drop-shadow() 对元素的部分内容添加单重及多重阴影 阅读全文

摘要： 到国庆了，大家都急着给祖国母亲庆生。 每年每到此时，微信朋友圈就会流行起给头像装饰上国旗，而今年又流行这款： emm，很不错。 那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用 CSS 如何简单实现呢？ 有人认为是改变其中一张图的透明度，实际上不是的。仔细观察合成后的头像，最左边的基本上只 阅读全文

摘要： 本文将介绍一个小技巧，通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果。 起因 一日，一群友私聊问我。如何使用 CSS 实现下述效果，一个文字的波浪效果： 我当时想都没想，就回答道，这个很简单啊。 熟练的打开 CodePen，一顿操作，卧槽，好像事情没有那么简单。想要用纯 C 阅读全文