首页
首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
iCSS
Chokcoco
创建于2021-05-11
订阅专栏
不止于 CSS 。
等 352 人订阅
共135篇文章
创建于2021-05-11
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
从 Chrome 125 开始,支持了一个全新的 CSS 特性 - Anchor Positioning,翻译过来即是锚点定位。 在之前的文章中,我们较为系统的讲述了这个新特性的使用,感兴趣的可以翻开
巧用 CSS 实现高频出现的复杂怪状按钮 - 内凹平滑圆角
接上篇,巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框。 上篇中,我们通过渐变的高阶技巧,实现了如下的内凹圆角边框: 本文,我们将探讨另外一个非常有意思的图形 -- 内凹平滑圆角:
巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框
在之前,我们有些过这么一篇文章 - 使用 CSS 轻松实现高频出现的各类奇形怪状按钮。 里面包含了如下这些图形: 你可以在这里看到:CodePen Demo -- CSS Various Button
【动画进阶】单标签实现多行文本随滚动颜色变换
本文,我们来看这么个有意思的问题。使用 CSS,实现在页面屏幕中有一长串多行字母,现在需要随着页面滚动,改变每个字母的颜色。这也是掘金上一个同学的私信提问: 这里和这位同学细聊,他没有回复,有一个细节
【现代 CSS】更强大的 :nth-child 选择器
今天群里讨论了一个非常有意思与 CSS 选择器相关的题目。题目如下: 假设我们如下的 HTML 结构: 效果如下: 如何在不添加类名的情况下,快速的选取第一个 class 为 .cc 的元素? 当然,
现代 CSS 解决方案:全尺寸的带圆角的渐变边框
在之前,我们有一篇介绍带圆角的渐变边框的纯 CSS 实现的文章: 巧妙实现带圆角的渐变边框 会有这么一个话题的本质在于,在过往,想使用纯 CSS 实现纯粹的,内部透明渐变边框,是一件非常困难的事情,像
巧妙使用多种方式实现单侧阴影
最近,在几个不同的群里都遇到有人在问同一个问题,如何使用 CSS 实现如下所示的单侧阴影: 也就是正常而言,阴影应该是出现在多条边上的,而现在,我们只希望阴影固定只能出现在某一侧。 单侧阴影其实是一个
【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
本文,我们将一起探讨探讨,如下所示的一个卡片 Hover 动画,应该如何实现: 这个效果的几个难点: 鼠标移动的过程中,展示当前卡片边缘的 border 以及发光效果; 效果只出现在鼠标附近?这一块的
渐变边框文字效果?CSS 轻松拿捏!
今天,有个群友问了我这么一个问题,如果不想切图,是否有办法实现带渐变边框的字体效果?如下所示: 本文,就将带尝试一下,在 CSS 中,我们可以如何尽可能的实现这种渐变边框字体效果。 元素叠加 首先,比
CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场景下的不同用法。 [attr]:该选择器选择包含 attr 属性的所有元素,不…
【动画进阶】类 ChatGpt 多行文本打字效果
今天我们来学习一个有意思的多行文本输入打字效果,像是这样: 这个效果其实本身并非特别困难,实现的方式也很多,在本文中,我们更多的会聚焦于整个多行打字效果最后的动态光标的实现。 也就是如何在文本不断变长
【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width
Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有 ::-webkit-scrollb
【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画
最近,群里在讨论一个很有意思的线条动画效果,效果大致如下: 简单而言,就是线条沿着不规则路径的行进动画,其中的线条动画可以理解为是特殊的光效。 本文,我们将一起探索,看看在不使用 JavaScript
现代 CSS 解决方案:accent-color 强调色
accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候,更深入的了解了一下这个属性。 简单而言
【动画进阶】神奇的 3D 卡片反光闪烁动效
最近,有群里在群里发了这么一个非常有意思的卡片 Hover 动效,来源于此网站 -- key-drop,效果如下: 非常有意思酷炫的效果。而本文,我们不会完全还原此效果,而是基于此效果,尝试去制作这么
现代 CSS 解决方案:文字颜色自动适配背景色!
在 23 年的 CSS 新特性中,有一个非常重要的功能更新 -- 相对颜色。 简单而言,相对颜色的功能,让我们在 CSS 中,对颜色有了更为强大的掌控能力。 其核心功能就是,让我们能够基于一个现有颜色
带圆角的虚线边框?CSS 不在话下
今天,我们来看这么一个非常常见的切图场景,我们需要一个带圆角的虚线边框,像是这样: 这个我们使用 CSS 还是可以轻松解决的,代码也很简单,核心代码: 但是,原生的 dashed 有一个问题,就是我们
【布局技巧】Flex 布局下居中溢出滚动截断问题
在页面布局中,我们经常会遇到/使用这么一类常见的布局,也就是列表内容水平居中于容器中,像是这样: 效果如下: 这里,外层的容器是定宽的,内层的 flex-item 也是定宽的。 当 flex-item
CSS 也能实现 if 判断?实现动态高度下的不同样式展现
最近在群里,有个小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器
单标签下多色块随机文字随机颜色动画
在 CSS 还原拉斯维加斯球数字动画 - 掘金 一文中,我们利用纯 CSS,实现了一个非常 Amazing 的动画效果: 其中一个核心点就是,我们利用了如下的代码,在一个 DIV 平面内,实现了单个平
下一页