共计 1687 个字符，预计需要花费 5 分钟才能阅读完成。
CSS 的全称是 Cascading Style Sheets，即层叠样式表，是一种样式表语言，用来形容 HTML 或 XML（包含如 SVG、XHTML 之类的 XML 分支语言）元素所出现的款式。
小编整顿了思否社区对于 CSS 的优质技术文章，欢送大家浏览 ~
📖 文章举荐
超酷炫的转场动画？CSS 轻松拿下！
借助弱小的 CSS 以及一些有意思的技巧，咱们利用纯 CSS 实现了这两个看似非常复杂的转场动画成果，并且，这在之前，是齐全不可能应用纯 CSS 实现的。
CSS color-scheme 和夜间模式
normal：示意元素未指定任何配色计划，因而应应用浏览器的默认配色计划出现。
light：示意能够应用操作系统亮色配色计划渲染元素。
dark：示意能够应用操作系统深色配色计划渲染元素。
基于 CSS mask-image 实现炫酷图片过渡成果之星球大战
在给公司开发官网的过程中，会有波及到一些图片的鼠标悬停成果，鼠标悬停后会扭转原图，单纯的渐隐渐现，放大放大，左右平移曾经满足不了产品经理冀望了，总感觉不够惊艳，创意不够。其实作为一个开发者，也不会满足这一般日常的动画交互成果，在寻找新的 idea 时发现基于 CSS mask-image 能够实现很多不错的成果，本文将基于此属性实现四种图片过渡动画成果。
动画合成小技巧！CSS 实现动感的倒计时成果
这是一个十分“动感”的倒计时成果，通常在一些流动收场中比拟常见，剖析一下整个动画过程，不难发现，有以下几类动画
- 数字的变动
- 放大和放大
- 透明度变动
不晓得小伙伴是否观察出来呢？上面来一起来看看具体实现吧
应用纯 CSS 实现超酷炫的粘性气泡成果
其中，要想灵活运用 SVG 中的 feGaussianBlur 滤镜还是须要有十分弱小的 SVG 常识储备的。那么，仅仅应用 CSS 是否实现该成果呢？
嘿嘿，弱小的 CSS 当然是能够的。本文，就将率领大家一步步应用纯 CSS，实现上述成果。
应用 CSS background 实现炫酷悬停成果
日常开发过程中，会遇到不少按钮鼠标悬停的成果，实现这类悬停成果的形式有很多，借助伪元素，CSS3 变换及过渡等都能够实现。明天的文章将应用背景色实现相似的成果，当咱们遇到一个问题时，你的脑海中的计划不止一种时，我想这必定是极好的，应用不同的办法达到同一的成果，或者某天所遇到的问题就迎刃而解了。
CSS 如何把元素固定在容器底部？（四种形式）
如果是页面底部，咱们能够间接 position: fixed;bottom: 0; 基于浏览器定位间接实现。
然而他要的成果是基于父级容器，那么咱们必须要应用其余伎俩来定位了
relative 来限度 absolute，而后 bottom: 0，然而在内容过长的时候会导致显示异样。所以咱们须要做外部滚动。
如果做外部滚动，那么咱们只有能够撑开盒子即可。不须要相对定位了
📖 问答举荐
- CSS 一个款式问题，底部多出一块红色的区域？
- 超出暗藏应用了 -webkit-line-clamp: 2; 为什么第三行也展现出了一部分？
- 【CSS】如何实现圆弧形态的切角？
- 请问这样的数字应该怎么用 CSS 来写呢？
- CSS 怎么实现两个 div 一个固定宽另一个填充残余空间？
- CSS 如何实现动静 loading 成果？
- CSS 计算宽度问题
- CSS 多行文本，如何实现间隔可调的下划线？
- 请问大家对于一个 CSS 节点选择器的问题
- CSS 命名标准
👇课程举荐
《扼要 CSS 教程》
课程链接：https://ke.segmentfault.com/c…
课程播种
- CSS 作为 Web 前端开发中必备的技能之一，因为其知识点多，内容杂，应用起来又十分的灵便，如果没有通过系统地学习，非常容易产生挫败感。本系列课程根据讲师本身的教训，系统地编排了 CSS 当中的知识点，由浅入深，从根底到简单，从实践到实际，手把手地介绍 CSS 当中最外围的知识点。
- 在理论的工作中，异样灵便的 CSS 会给团队开发带来不必要的麻烦。本系列课程除了介绍知识点之外，更重视理论工作的意义，让同学们不仅可能把握 CSS 的常识，更能把握理论工作中应该留神的点，让实践和理论得以联合，无缝连接学习和工作。
PS：大家想看哪些方面的技术内容，能够在评论区留言喔 ~
如有问题能够增加小姐姐微信~