今天,我们来看这么一个非常常见的切图场景,我们需要一个带圆角的虚线边框,像是这样: 这个我们使用 CSS 还是可以轻松解决的,代码也很简单,核心代码: div { border-radius: 25px; border: 2px dashed #aaa; } 但是,原生的 dashed 有一个问题,
在页面布局中,我们经常会遇到/使用这么一类常见的布局,也就是列表内容水平居中于容器中,像是这样: <ul class="g-cox; flex-direction: r
最近,相信大家一定被这么个动效给刷屏了: 以至于,基于这个效果的二次创作层出不穷,眼花缭乱。 基于跨窗口通信
最近在群里,有个小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,
我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。在 CSS 还原拉斯维加斯球数字动画 - 一文中,我们利用纯 CSS,实现了一个非常 Amazing 的动画效果:其中一个核心点就是,我们利用了如下的代码,在一个 DIV 平面内,实现了单个平面下的随机文字随机颜色效果。效果如下:其中的 HTML 代码大致如下:
我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 在
我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 最近大家刷抖音
最近,在 Steam 玩一款老游戏(生化危机 4 重置版),其中,每当游戏转场的过程中,都有这么一个有趣的 Loading 动画: 整个效果有
本文,我们将一起
本文,将向大家介绍 CSS 规范中,最新的 Anchor Positioning,翻译为**锚点定位**。 Anchor Position 的出现,极大的丰富了 CSS 的能
很早之前,就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?,彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段,而今天(2023-09-02),CSS 原生嵌套 Nesting 终于成为了既定的规范! CSS 原生
我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 本文,我们将一起利用纯 CSS,实现如下这么个酷炫的效果: 在一年前,我介绍了 CSS 中非常新奇有趣的一个新特性 -- @scroll-timeline:革命性创新,动画杀手锏
在 CSS 中,存在许多数学函数,这些函数能够通过简单的计算操作来生成某些属性值,例如在[现代 CSS 解决方案:CSS 数学函数](https://github.com/chokcoco/iCSS/issues/177)一文中,我们详细介绍了 + calc():用于计算任意长度、百分比或数值型数据
在 CSS 中,存在许多数学函数,这些函数能够通过简单的计算操作来生成某些属性值,例如 : * calc():用于计算任意长度、百分比或数值型数据,
项目背景 我们的系统(一个 ToB 的 Web 单页应用)前端单页应用经过多年的迭代,目前已经累积有大几十万行的业务代
最近,群友分享了一个很有意思的效果: ![
- Letter
最近,群友贴了一个非常有意atermark.image?)
在 WeGame 的 PC 端官网首页,有着非常多制作精良的基于滚动的动画效果。 这里我
前不久,在网上看到这么一张
之前,整个《现代图片性能优化及体验优化指南》分了 5 篇来发,本文
图片资源,在我们的业务中可谓是占据了非常大头的一环,尤其是其对带宽的消耗是十分巨大的。 对图片的性能优化及体验优化在今天就显
大部分同学都知道,在 CSS 世界中,有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。 正常而言: 1vw 等于1/100的视口宽度 (Viewport Width) 1vh 等于1/100的视口高度 (Viewport Height) vmin — vmin 的值是
本文将介绍一种基于 CSS 变量技巧,通过合理使用 CSS 变量,实现 CSS 动画 @keyframes 的复用。 CSS 变量 CSS 变量大家应该都比较熟悉了,已经不能算是新知识了,快速过一遍。 CSS 变量(CSS Variable),在之前也叫做 CSS 自定义属性,其使用方式如下: //
本文是系列第五篇,终章。系列文章: 现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用 现代图片性能优化及体验优化指南 - 响应式图片方案 现代图片性能优化及体验优化指南 - 缩放精细化展示及避免布局偏移、拉伸 现代图片性能优化及体验优化指南 - 懒加载及异步图像解码方案 图
本文是系列第四篇。系列文章: 现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用 现代图片性能优化及体验优
在许久之前,曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。我们实现了这样一种效果: 文本内容不超过容器宽度,正常
最近,在 CodePen 上,看到一个非常有意思的图片动效,效果如下: 原效果链接:CodePen Demo - 1 div pure CSS blinds staggered animation in 13 declarations 本身这个动画效果,并没有多惊艳。惊艳的地方在于原作者的实现方式非
在业务中,有这么一种场景,表格下的某一列 ID 值,文本超长了,正常而言会是这样: 通常,这种情况都需要超长省略溢出打点,那么,就会变成这样: 但是,这种展示有个缺点,3 个 ID 看上去就完全一致了,因此,PM 希望能够实现头部省略打点,尾部完全展示,那么,最终希望的效果就会是这样的: OK,很有
今日,群友提问,如何实现这么一个 Loading 效果: 这个确实有点意思,但是这是 CSS 能够完成的? 没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们之前的: 使用纯 CSS 实现超酷炫的粘性气泡效果 巧用 CSS 实现酷炫的充电
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号