iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
CSS 实现视差效果
## 何为滚动视差 **视差滚动**（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。  通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。下面就让我们来见识一二： ## 认识 `background-attachment` `background-attachment` 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。但是它本身很有意思。 `background-attachment`：如果指定了 `background-image` ，那么 `background-attachment` 决定背景是在视口中固定的还是随着包含它的区块滚动的。 单单从定义上有点难以理解，随下面几个 Demo 了解下 `background-attachment` 到底是什么意思： ### `background-attachment: scroll` **scroll**...
写这篇文章的缘由是因为看到了这个页面：  [糯米-未来大学 3D View 页面](https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1) 运用 CSS3 完成的 3D 视角，虽然有一些晕3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端制作一些 H5 页面可谓十分博人眼球。 并且掌握原理之后制作起来也并不算废力，好好的研究了一番后将一些学习过程共享给大家。下面进入正文。 ## 3D 效果示意 先直观感受一下上述我所说的效果的简化版本：  [CodePen Demo -- 3D View](https://codepen.io/Chokcoco/pen/mAyRGv) 这里我使用了带背景色的 Div 作为示例，我们的视角处于一个正方体中，正方体的旋转动画让我们有了 3D 的感觉。 那么原本的图长什么样呢？我们把距离拉远，一探究竟：...
写本文的起因是，一天在群里有同学说误打误撞下，**使用负的 `outline-offset` 实现了加号**。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？ ## 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构： ```html ``` ```CSS div { width: 200px; height: 200px; outline: 20px solid #000; outline-offset: 10px; } ```  修改 `outline-offset`...
之前在这篇文章中 -- [《老生常谈之 CSS 实现三角形》](https://github.com/chokcoco/iCSS/issues/108)，介绍了 6 种使用 CSS 实现三角形的方式。 但是其中漏掉了一个非常重要的场景，**如何使用纯 CSS 实现带圆角的三角形呢？**，像是这样：  本文将介绍几种实现带圆角的三角形的实现方式。 ## 法一. 全兼容的 SVG 大法 想要生成一个带圆角的三角形，**代码量最少**、最好的方式是使用 SVG 生成。 使用 SVG 的 多边形标签 ``...
一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。  而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。  当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。 ## 使用 SVG 实现波浪效果 借助 SVG ，是很容易画出三次贝塞尔曲线的。 看看效果：  代码如下： ```HTML 50.0% ``` [CodePen Demo -- SVG Wave...
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为**混合模式**。 混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。 我个人对混合模式的理解也十分浅显，本文只是带领大家走进 CSS 混合模式的世界，初浅的了解混合模式及尝试使用它制作一些效果。 ## `mix-blend-mode` 概述 上文也说了，`mix-blend-mode` 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS 中图层的概念替换为 HTML 中的元素。 看看可取的值有哪些： ```CSS...
先上张图，如何使用纯 CSS 制作如下效果？  在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？ ## 定义需求 我们定义一下简单的规则，要求如下： + 假设 HTML 结构如下： ```HTML 不可思议的CSS 导航栏 光标小下划线跟随 PURE CSS Nav Underline ``` + 导航栏目的...
在很久之前的一篇文章，有讲到 `-webkit-box-reflect` 这个属性 -- [从倒影说起，谈谈 CSS 继承 inherit](https://github.com/chokcoco/iCSS/issues/49) [`-webkit-box-reflect`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect) 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。 上一次写它，它的兼容性还非常非常的惨淡，但是到今天，虽然还是一个 **Non-standard** 的语法，但是兼容性已经大有改观，并且利用它，我们可以实现非常多有意思的效果。 截止至 2021-02-19，它的兼容性已经达到了 91.02%，看看 [CANIUSE -webkit-box-reflect](https://caniuse.com/?search=-webkit-box-reflect)：  接下来进入正文。 ## `-webkit-box-reflect` 基本用法 `-webkit-box-reflect` 的语法非常简单，最基本的用法像是这样： ```CSS div {...
`display: contents` 是一个比较陌生的属性，虽然属于 display 这个基本上是最常见的 CSS 属性，但是 `contents` 这个取值基本不会用到。但是它早在 2016 年就已经得到了 Firefox 的支持。 本文将深入一下这个有意思的属性值。 ## 基本用法 根据 [W3C](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 对 `display: contents` 的定义。 > The element itself does not generate any...
本文将讲解如何利用 `background` 系列属性，巧妙的实现一些花式的文字效果。通过本文，你将可以学到： + 通过 `background-size` 与 `background-position` 实现酷炫的文字下划线效果 + 通过 `background-size` 与 `background-position` 以及 `background-clip` 实现文字逐个渐现的效果 + 通过 `animation-delay` 实现文字的渐现效果 ## 起因 写本文的动机是在于，某天，被这样一个标题所吸引 -- [10 Masterfully Designed Websites](https://medium.com/@MonteVerdeVT/10-masterfully-designed-websites-f999112e2fa9)，其中列举了 10...