3D 穿梭效果?使用 CSS 輕鬆搞定

  • 2021 年 11 月 10 日
  • 筆記

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

Continue Reading

N 種僅僅使用 HTML/CSS 實現各類進度條的方式

  • 2021 年 11 月 4 日
  • 筆記

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

Continue Reading

CSS 奇技淫巧 | 巧妙實現文字二次加粗再加邊框

  • 2021 年 10 月 28 日
  • 筆記

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

Continue Reading

利用 CSS Overview 面板重構優化你的網站

  • 2021 年 10 月 20 日
  • 筆記

本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel,并且介绍如何更好地利用这个面板。通过 CSS Overview Panel,可能可以帮助我们: 更准确(高保真)的 还原设计稿 ,辅助设计走查环节 更好的 精简我们的 CSS 代码 辅助进行网站的 可访问性提升 &hellip;

Continue Reading

CSS 奇技淫巧 | 妙用 drop-shadow 實現線條光影效果

  • 2021 年 10 月 8 日
  • 筆記

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

Continue Reading

CSS 小技巧 | 一行程式碼實現頭像與國旗的融合

  • 2021 年 10 月 1 日
  • 筆記

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

Continue Reading

CSS 奇技淫巧 | 妙用混合模式實現文字鏤空波浪效果

  • 2021 年 9 月 27 日
  • 筆記

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

Continue Reading

妙用 background 實現花式文字效果

  • 2021 年 9 月 16 日
  • 筆記

本文将讲解如何利用 background 系列属性,巧妙的实现一些花式的文字效果。通过本文,你将可以学到: 通过 background-size 与 background-position 实现酷炫的文字下划线效果 通过 background-size 与 background-position 以 &hellip;

Continue Reading

奇思妙想 CSS 3D 動畫 | 僅使用 CSS 能製作出多驚艷的動畫?

  • 2021 年 8 月 24 日
  • 筆記

本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣、酷炫的动画效果。认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画制作水平会有所帮助 CSS 3D 基础知识 本文默认读者掌握一定的 CSS 3D 知识,能够绘制初步 &hellip;

Continue Reading

CSS 奇思妙想 | 使用 resize 實現強大的圖片拖拽切換預覽功能

  • 2021 年 8 月 17 日
  • 筆記

本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法。 将两张图片叠加在一起 改变上层图片的宽度,或者使用 mask, 改变 mask 的透明度区间变化 两种方式都简单示意一 &hellip;

Continue Reading