关于css:SegmentFault-思否技术周刊-不走寻常路的-CSS

35次阅读

共计 2438 个字符,预计需要花费 7 分钟才能阅读完成。

CSS (英文全称:Cascading Style Sheets)是一种用来体现 HTML(规范通用标记语言的一个利用)或 XML(规范通用标记语言的一个子集)等文件款式的计算机语言。CSS 不仅能够动态地润饰网页,还能够配合各种脚本语言动静地对网页各元素进行格式化。

小编整顿了思否社区对于 CSS 的优质技术文章,欢送大家浏览 ~~

CSS 个性

《2022 年最受注目的新个性 CSS @layer 到底是个啥?》

步入 2022,CSS 的新个性层出不穷,而最近在 CSS 圈最受注目的新个性,非 CSS @layer 莫属。
本文将用最简洁的语言,疾速让读者们搞懂,到底什么是 CSS @layer 新标准。

《革命性翻新,动画杀手锏 @scroll-timeline》

在 CSS 标准 Scroll-linked Animations 中,推出了一个划时代的性能。也就是 — The @scroll-timeline at-rule,直译过去就是滚动工夫线。
本文将带大家一探到底,从入门到学会应用 CSS @scroll-timeline。

《说一说 CSS 中的变量》

大部分的编程语言,在语言呈现的那一刻就反对变量。然而,CSS 一开始就不反对原生变量。所以大家开始抉择 CSS,LESS 等兼容的 CSS 扩大语言。不过庆幸的是 CSS 目前也曾经反对变量,下文就来聊一聊 CSS 中的变量。

《CSS 中的简写到底有多少坑?当前不敢了 …》

简写(语法糖)可能给咱们的编码带来了很多便当,但凡事都有好有坏,简写也会带来一些问题,所以明天就来讨论一下 CSS 中的简写的 “ 好 ” 和 “ 坏 ”。

《CSS 自定义属性指北》

自定义属性(有时候也被称作 CSS 变量或者级联变量)是由 CSS 作者定义的,它蕴含的值能够在整个文档中重复使用。由自定义属性标记设定值(比方:–main-color: black;),由 var() 函数来获取值(比方:color: var(–main-color);)

《CSS 也能主动补全字符串?》

很多时候都会碰到字符串补全的需要,典型的例子就工夫或者日期中的补零操作,例如

2021-12-31
2022-03-03

通常的做法是

if (num < 10) {num = '0' + num}

起初,JS 中呈现了原生的补全办法 padStart()padEnd(),如下

'3'.padStart(2, '0')
// 后果是’03‘'12'.padStart(2, '0')
// 后果是’12‘

其实呢,在 CSS 中也是能够实现这样的成果的,并且有多种计划,上面一起看看吧,置信能有不一样的领会
援用

《CSS 实现树状构造目录》

最近在我的项目中碰到了一个这样的树状构造目录,成果如下

如果用到了 Ant Design 这样的框架,那能够间接用现成的组件。如果没有用到这样的框架呢?其实纯 CSS 也是能够搞定的,上面看看如何实现的,还有很多你可能不晓得 CSS 小技巧哦~

神奇的 CSS

《神奇的 CSS,让文字智能适配背景色彩》

文本在彩色底色上体现为红色,在红色底色上体现为彩色。看似很简单的一个成果,然而其实在 CSS 中十分好实现,明天就介绍这样一个小技巧,在 CSS 中,利用混合模式 mix-blend-mode: difference,让文字智能适配背景色彩。

《Amazing!巧用 CSS 视差实现酷炫交互动效》

本文将介绍利用 CSS 实现滚动视差成果的一个小技巧,并且,利用这个技巧来制作一些有意思的交互特效。
这里,会使用上这样一种纯 CSS 的视差技巧:
1、应用 transform: translate3d 实现滚动视差
2、借助 CSS 视差实现酷炫交互动效
3、CSS 滚动视差动画 2
4、联合 CSS @scroll-timeline,利用 CSS 管制滚动与动画

《巧用 background-clip 实现超强的文字动效》

background-clip: text 之前也提到多很屡次。其外围就在于以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。
简略而言,就是使用了 background-clip: text 的元素,其背景内容只保留文字所在区域局部,配合通明文字 color: transparent,就可能利用文字透出背景。
利用 background-clip: text,可能失去很多十分有意思的文字效果。

《让交互更加活泼!有意思的鼠标追随 3D 旋转动效》

简略剖析一下,这个交互成果次要有两个外围:

  1. 借助了 CSS 3D 的能力
  2. 元素的旋转须要和鼠标的挪动相结合

本文将讲述如何应用纯 CSS 实现相似的交互成果,以及借助 JavaScript 绑定鼠标事件,疾速还原上述成果。

《CSS 暗影进阶,实现更加的平面的暗影成果!》

CSS 暗影的存在,让物体看上去更加有型平面。然而,在最简略的暗影应用之上,咱们能够实现更多有意思且更加平面的暗影成果。
本文将带大家看看如何应用 CSS 实现几类比一般暗影更加平面的暗影成果。

CSS 的艺术

《CSS 反复线性突变之画格子》

《离谱的 CSS!从表盘刻度到艺术剪纸》

《应用 CSS 绘制带有动画成果的 React Logo》

《还在应用定时器吗?CSS 也能实现电子时钟》

CSS 面试

《前端面试材料整顿【css 篇】》

简略选择器:id 选择器、类选择器、标签选择器、
组合选择器:后辈选择器(空格)、子选择器(>)、兄弟选择器(+)、通用选择器(~)
伪类(:hover)
伪元素(::before, ::firt-child,::not())
属性选择器
ps. 兄弟选择器(+)与通用选择器(~):“+”指“本人”相邻兄弟,“~”会利用所有兄弟
援用

《一道有意思的 CSS 面试题,FizzBuzz ~》

FizzBuzz 是一道很有意思的题目。咱们来看看题目:
如果遇见了 3 的倍数要说 Fizz,5 的倍数就说 Buzz,如果既是 3 的倍数又是 5 的倍数就说 FizzBuzz。
如果是在一些编程语言中,这是一道比拟高级的题目,当然,略微转换一下,咱们就能够把它转换成一道无关 CSS 选择器的题目。


PS:大家想看哪些方面的技术内容,能够在评论区留言喔 ~

如有问题能够增加小姐姐微信~

正文完
 0