最近，有同学询问，如何使用 CSS 实现如下效果： 看起来是个很有意思的动效。 仔细思考一下，要想实现这类效果，其实用到的核心属性只有一个 — background-clip: text。 有意思的 background-clip: text background-clip: text 之前也提到多很多次。其核心就在于以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。 简单而言，就是运用了 background-clip: text 的元素，其背景内容只保留文字所在区域部分，配合透明文字 color: transparent，就能够利用文字透…
之前在公众号转发了好友 Vajoy 的一篇文章 — 巧用 CSS 把图片马赛克风格化。 核心是利用了 CSS 中一个很有意思的属性 — image-rendering，它可以用于设置图像缩放算法。 何为 image-rendering？ CSS 属性 image-rendering 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。 语法比较简单： 其中，image-rendering: pixelated 比较有意思，可以将一张低精度图像马赛克化。 譬如，...
CSS 解决方案：Modern CSS Reset
本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。 关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 – CSS 实现视差效果，感兴趣的同学可以先看看这篇文章。 这里，会运用上这样一种纯 CSS 的视差技巧： 使用 transform: translate3d 实现滚动视差 这里利用的是 CSS 3D，实现滚动视差效果。 原理就是： 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中， 再给子...
今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现： 简单分析一下，这个交互效果主要有两个核心： 借助了 CSS 3D 的能力 元素的旋转需要和鼠标的移动相结合 本文，就将讲述如何使用纯 CSS 实现类似的交互效果，以及，借助 JavaScript 绑定鼠标事件，快速还原上述效果。 纯 CSS 实现元素的 3D 旋转 如果不借助 JavaScript，仅仅只是 CSS，如何实现类似的 3D 旋转效果呢？ 这里会运用到一种名为正反旋转相消或者是正负旋转相消的小技巧。嗯，名字起的很奇怪，好像数学概念一样。 在动画中，旋转是非常常用的属性， [crayon-68a967421041b9…
CSS 阴影的存在，让物体看上去更加有型立体。 然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。 本文将带大家看看如何使用 CSS 实现几类比普通阴影更加立体的阴影效果。 CSS 阴影基础 CSS 中，明面上可以实现阴影的有三个属性： box-shadow – 盒阴影 text-shadow – 文字阴影 filter: drop-shaodw() – 滤镜内的阴影 关于它们的基础语法和使用就不过多描述，这一部分大家可以先在 MDN 补齐，贴几张图快速复习一下： box-shadow – 盒阴影： text...
某日，群里有这样一个问题，如何实现这样的表盘刻度： 这其实是个挺有意思的问题，方法也有很多。 单标签，使用 conic-gradient 实现表盘刻度 最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常简单，首先，我们实现一个重复角向渐变： 其实比较难理解的是 calc((360 / 60) * 1deg)，这是因为表盘一共通常有 60 个刻度。效果大概是这样： 接下来，只需要将中间镂空即可。如果背景色是白色，直接叠加...
在 CSS 中，其实存在各种各样的函数。具体分为： Transform functions Math functions Filter functions Color functions Image functions Counter functions Font functions Shape functions Reference functions CSS grid functions 本文，将具体介绍其中的 CSS 数学函数（Math functions）中，已经被浏览器大规模支持的 4 个： calc() min() max() clamp() 为什么说是被浏览器大规模...
在 CSS 选择器家族中，新增这样一类比较新的选择器 — 逻辑选择器，目前共有 4 名成员： :is :where :not :has 本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。 :is 伪类选择器 :is() CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。 在之前，对于多个不同父容器的同个子元素的一些共性样式设置，可能会出现如下 CSS 代码： 而如今有了 :is() 伪类，上述代码可以改写成： [crayon-68a96742121c4724...
今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么？ 像是这样： 一个非常有意思的问题，答案是可以的。我们抽取一下其中的关键点： 动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧 动画通过 hover 驱动，只有用户 hover 元素的时候，动画才进行 animation-fill-mode 控制元素在各个阶段的状态 首先，动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧。 这个刚好利用 CSS 动画的 animation-fill-mode: bo...
实用的后台管理系统框架
前端静态网页模板