chokcoco

chokcoco 查看完整档案

深圳编辑  |  填写毕业院校深圳腾讯公司  |  切图仔 编辑 github.com/chokcoco 编辑
编辑

坎坷切图仔

个人动态

chokcoco 发布了文章 · 1月13日

如何不使用 overflow: hidden 实现 overflow: hidden?

一个很有意思的题目。如何不使用 overflow: hidden 实现 overflow: hidden

CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而 overflow: hidden 则会将超出容器范围内的内容剪裁。

控制 overflow: hidden 的方向

这源自一个实际的需求,在某个需求当中,要求容器内的内容,在竖直方向上超出容器会被裁剪,而在水平方向上超出容器,则不会被裁剪。类似这样:

1 上午10.26.03.gif

有意思,第一个想到的解法当然是在上述黄色背景元素本身之外再套用一层父元素,然后父元素才是实际设置 overflow: hidden 的元素,父元素的范围就是实际才是控制是否裁剪的范围。类似这样:

2 上午10.26.03.gif

实际的父元素才是设置了 overflow: hidden 的元素。

当然,如果实际情况就是这么简单,也没什么问题。

但是如果元素处于一个复杂的布局流内,那么可能就没有那么多的空间,让我们再去包裹一层父容器了:

3 上午10.26.03.png

类似上图的情况,还是中间黄色元素,要求只有竖直方向超出裁剪。此时,包裹父元素不再那么容易施展。所以,我们需要另辟蹊径。

利用 clip-path 进行裁剪

好的,这会可以进入正文了。CSS 中,除了 overflow: hidden,还是有其它属性也可以实现超出容器区域进行裁剪的。clip-path 便是其中翘楚。

使用 clip-path,我们可以方便的控制任意方向上的裁剪。上述的需求则可以这样解决:

<div class="g-container">
    <div class="sub"></div>
</div>

关键的 CSS 代码如下:

.g-container {
    width: 200px;
    height: 200px;
    clip-path: polygon(-1000% 0, 1000% 0, 1000% 100%, -1000% 100%);
}

这里利用了 clip-path: polygon() 来裁剪一个矩形区域,而利用了 clip-path 支持负坐标的特点,将裁剪的起点定到远离坐标能画成一个大矩形的形状。示意图:

4 上午10.26.03.png

这样,我们能够在正常布局流中,当前容器大小范围内,画出任意希望 overflow: hidden 的范围。

你可以点进 Demo 里面尝试下:

CodePen -- Clip-path overflow

再举两个例子:

{
    // 裁剪出左右两边都 overflow:hidden,上下不 overflow:hidden 的区域
    clip-path: polygon(0 -1000% ,100% -1000%, 100% 1100%,0 1100%);

   // 裁剪出左边、上边、右边都 overflow:hidden,下边不 overflow: hidden 的区域
    clip-path: polygon(100% 0,100% 1000%, 0 1000%, 0 0);
}

当然,上述代码中的 1000% 是非常灵活的,自己控制,够用就行。

非 overflow、clip-path 的裁剪方式

那么。通过上面的一个小例子,我们知道了 overflowclip-path 可以裁剪区域。那么除了这两个,CSS 中还有没有可以进行区域裁剪的元素呢?

有,还有一个有意思的元素,就是 -- contain

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

这里不具体去介绍它的每个属性,感兴趣的可以翻看下这篇文章 -- CSS新特性contain,控制页面的重绘与重排

contain: paint 进行内容裁剪

详细说说 contain: paint,设定了 contain: paint 的元素即是开启了布局限制,也就是说,此元素的子元素不会在此元素的边界之外被展示。

contain: paint 属性产生的目的,即是为加快页面的渲染,在非必要区域,不渲染元素。因此,如果元素不在屏幕上或以其他方式设定为不可见,则其后代不可见不被渲染。
.g-container {
    contain: paint;
}

看看示例:

5 上午10.26.03.gif

CodePen Demo -- contain: paint Demo

contain: paint 的副作用

contain: paint 的本意是用于提升页面的渲染,裁剪到容器之外的元素不进行渲染。但是使用它会产生一些副作用:

  1. 它会生成一个自己的新的堆叠上下文(It becomes a stacking context),也就是说,它会改变它的子元素的 absolute 定位和 fixed 定位的基准;
  2. 它会成为新的格式化上下文(It becomes a new formatting context),也就是说,这意味着元素外部的布局不会再影响它的子元素;

更具体的,可以看看这篇文章 -- CSS Containment in Chrome 52

我们解释下第一点,非常的有意思,它会生成一个自己的新的堆叠上下文,也就是说,它将改变 position: fixed 元素的基准,它会使得设置了 position: fixed 的元素不再相对于视口进行定位,而是相对于该元素进行定位。也就是退化成了 position: absolute

当然,这个不是本文的重点,我提供了一个 Demo -- contain: paint create a stacking context,这里就不继续展开。

总结一下

到此,本文提供了 3 种可以实现超出容器范围裁剪的方法:

  • overflow: hidden
  • clip-path 绘制裁切区域
  • contain: paint 不绘制元素范围外的内容

这里再提供下 3 个示例的 Demo:CodePen Demo -- Overflow Hidden In CSS

当然,它们之间还是有一些差异:

  1. overflow: hiddencontain: paint 会创建一个 BFC,而clip-path不会,它只是单纯的裁剪
  2. 兼容性间的差异

所以也就是说,CSS 不仅仅只有 overflow: hidden 实现 overflow: hidden,很多情况,可以灵活使用。

牛刀小试

再来个有意思的环节,在 一行 CSS 代码的魅力 中,提到了 CSS Battle

这个网站是核心玩法就是:官方给出一张图形,在给定的 400 x 300 的画布上,能够用越短的代码实现它,分数就越高

上次讲了一题通过一行 CSS 代码实现,今天,我们再来看看第二题

6 上午10.26.03.png

怎么用最短的代码实现它呢?想想今天说的 clip-path

首先,我们利用这一一段代码,生成这样一个图形:

<style>
body {
    margin: 0 50px;
    background: #62374e;
    border: 50px dashed #fdc57b;
}

7 上午10.26.03.png

然后,利用 clip-path,把上下两部分裁掉即可。

<style>
body {
    margin: 0 50px;
    background: #62374e;
    border: 50px dashed #fdc57b;
  + clip-path: polygon(0 50px, 100% 50px, 100% 250px, 0 250px);
}

6 上午10.26.03.png

这样就完美实现啦。当然,现在字符数有点多,有 158 个字符这么多。其实对于裁剪矩形区域,clip-path 有更便捷的语法,上述 clip-path:polygon(0 50px, 100% 50px, 100% 250px, 0 250px) 可以替换成 clip-path:inset(50px 0),减少了 20 个字符。

当然,再暴力一点,我们也可以一行实现:

<body bgcolor=62374e style=margin:0+50;border:dashed+50px#fdc57b;clip-path:inset(50px+0>
当然,这里可能用了一些这个网站才允许的语法,不过核心实现还是在于用 clip-path 切割掉多余部分

最后

好了,本文到此结束,希望对你有帮助 :),想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 -- iCSS前端趣闻 😄

qrcode.png

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

赞 6 收藏 4 评论 1

chokcoco 发布了文章 · 1月8日

水平垂直居中深入挖掘

在上篇文章 -- 一行 CSS 代码的魅力 的最后,提到了两种快速实现水平垂直居中的方式。

当然,CSS 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉,本文的重点不是罗列有多少种方式实现水平垂直居中方式,而是探讨一下常见的几种水平垂直居中的方式的利弊。

嗯哼?也就是:

  • 那么多种水平垂直居中的方式,如果真的在业务中需要使用了,你脑海里第一时间会想到哪个?
  • 不同的水平垂直居中方式,它们肯定存在差异,那么最显著的不同是什么?
  • 有没有所谓的最完美的水平垂直居中?

本文将讨论 4 种水平垂直居中的方式,分别是,并且每个起个名字方面下面看图:

  1. absolute: position: absolute 配合 top:50%;left:50%;transform:translate(-50%, -50%)
  2. autobot: display:flex 配合 margin:auto
  3. flex: display:flex 配合 align-items:centerjustify-content:center
  4. grid: display:grid 配合 place-content:center;

居中单个元素

对于如下简单的结构:

<div class="g-container">
    <div class="sub"></div>
</div>

居中单个元素而言,上述 4 种方法都很好,没有问题。

1.png

CodePen Demo -- Centering in CSS

居中多个元素

对于如下稍微复杂点的结构:

<div class="g-container">
    <div class="sub">1</div>
    <div class="sub">123</div>
    <div class="sub">123456</div>
</div>

那么如果是居中多个子元素,上述 4 种方法,就能体现出明显的不一样。稍微也修改一下子元素,不给它设定宽度,通过 padding 撑开即可:

.sub {
    border: 1px solid deeppink;
    padding: 10px;
    border-radius: 5px;
}

看看结果如何:

2.png

CodePen Demo -- Centering in CSS 2

简单分析分析:

  1. absolute 的方法明显有问题,由于用的绝对定位,其实 3 个子元素都叠在了一起
  2. flexgrid 的方法,如果不手动添加边距(margin 或者 gap),会贴在一起
  3. 不限制方向的话,flex 默认是水平排列,grid 是竖直排列
  4. 非常重要的一点,grid 布局下的子元素的宽度,所以子元素的宽度会被强行拉伸至最宽的一个子元素的内容的宽度

对于多个子元素,absolute 方法明显不适用, 接下来主要看剩余 3 个方法在一些细节上的差异。

控制间距

如果我们希望控制每个元素之间的间距呢?我们给 autobotflexgrid 的容器各自加上 gap: 5px,再看看:

.g-container{
    gap: 5px;
}

3.png

CodePen Demo -- Centering in CSS 3

  1. margin: auto 由于需要均分剩余空间,所以表现并不好,无法按照我们设想的 5px 宽度进行间隔

让元素多到溢出

OK,接下来,我们让内容再多一点,多到溢出整个容器,看看有什么不一样。

4.png

再来一张竖直方向排列的:

5.png

CodePen Demo -- Centering in CSS 4

可以看到:

  1. 非常重要的一点,由于没有了剩余空间margin: auto 已经无法做到均匀分配,水平垂直居中了,而是一边贴着容器边,另外一边溢出
  2. flexgrid 都做到了即便超出容器空间,依然是水平垂直居中的

总结一下

经由上述几个 DEMO 可以看出来,在目前比较常用的水平垂直居中方案当中。flex 方案应该是目前而言最优的选择,它能够在各种环境下都保持内部元素的水平垂直居中并且不改变子元素的某些特征:

  1. 便捷的水平垂直居中单个元素
  2. 便捷的水平垂直居中多个元素,无论是横向、竖向,亦或内容超出
  3. 非常方便控制子元素之间的间距
  4. 不会改变子元素的宽度

当然,美中不足的是,可能相对而言,要敲多几个字符。

margin: autogrid 则或多或少有一些小问题。absolute 无法应付多个元素。

最后

本文知识点比较细,也表明 CSS 虽然简单,但是不代表它容易。我们日常工作中用到的很多属性其实还有很多细节可以挖掘深入。

譬如,可以再比较下在书写方式 writing-mode 不同的场景下,上述水平垂直居中的方式的异同,等等。

好了,本文到此结束,希望对你有帮助 :),想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 😄

QQ20210108-0.png

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

赞 7 收藏 4 评论 0

chokcoco 发布了文章 · 1月7日

一行 CSS 代码的魅力

之前在知乎看到一个很有意思的讨论 一行代码可以做什么?

那么,一行 CSS 代码又能不能搞点事情呢?

CSS Battle

首先,这让我想到了,年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是:

官方给出一张图形,在给定的 400 x 300 的画布上,能够用越短的代码实现它,分数就越高。

注意是,完全一模一样还原

其中,第一题就非常有趣,看看题目:

1.png

嗯,想一想,如果给定这样一张图形,告诉你 HTML 的大小是 400px x 300px,图片中使用到的颜色是 #5D3A3A, #B5E0BA,你会怎么用 CSS 去实现它呢?

因为要求,字符数越少,分数越高,当然是选字符少的标签,是不是这样:

<p>
<style>
body{background:#5D3A3A;}
p {width: 200px;height:200px;background:#B5E0BA;}
</style>
这个网站的设定,HTML 和 CSS 可以按照上述格式写在一起,<style> 标签内的即为 CSS,之外的是 HTML ,标签 <p></p> 可以简写为 <p>

额,这样当然可以,但是看看文章的标题,一行 CSS ?这明显不是啊,并且这里有 100+ 个字符。我们得把字符数压一压。

嗯嗯嗯,想到了阴影,尝试下使用 box-shadow

<a>
<style>
a {
    box-shadow:0 0 0 200px #b5e0ba,0 0 0 400px #5d3a3a;
}
</style>

利用两层阴影,完美实现图例图形,并且,字符数压缩到了 82 个。当然,这还不是极致,我们完全可以内联 CSS,再减少字符数:

<a style="box-shadow:0 0 0 200px #b5e0ba,0 0 0 400px #5d3a3a">

只有 62 个字符。当然,从一行代码的角度,这个问题完美的解决了,如果追求极致的字符数,上述的代码还可以再简化一下:

<a style=box-shadow:0+0+0+200px#b5e0ba,0+0+0+5in#5d3a3a>
这里有一些小知识点,HTML5 支持属性后面不用引号包住,又譬如 box-shadow: 0 0 0 400px #5d3a3a 是可以压缩到 box-shadow:0+0+0+5in#5d3a3a,CSS 中 1in=96px,但是画布只有 400px,5in 大于 400px,也没有问题,能够充满画布,但是 400px 相对 5in 字符多了 2 个。

浏览器里面看一下,这个是完全正确的写法:

1.png

OK,最终只有 56 个字符,完美。当然,CSS Battle 里面还有更多更复杂的挑战,也有很多能够通过一行代码实现的,感兴趣的尝试下。

一行背景代码

要说到 CSS 最有意思的属性,我觉得背景(background)肯定能够获得很多选票。背景分为:

  • 纯色
  • 线性渐变(linear-gradient)
  • 径向渐变(radial-gradient)
  • 角向渐变(conic-gradient)
  • 多重线性渐变(repeating-linear-gradient)
  • 多重径向渐变(repeating-radial-gradient)
  • 多重角向渐变(repeating-conic-gradient)

突出一个字,离谱。并且它们还可以互相混合、叠加添加滤镜、配合各种背景相关属性等等等。

不过今天,来看看一行 CSS Background 代码能玩出什么花来。嗯?这里的主角是多重角向渐变(repeating-conic-gradient),只用一行 CSS 代码:

{
    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}

这什么玩意?脑补一下,这行代码绘制出来的图形会是什么样子?看看:

2.png

Wow,不可思议。这里 0.1deg 非常关键,这里的角度越小(小于 1deg 为佳),图形越酷炫。

我们把 0.1deg 替换成 30deg 看看:

{
    background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

3.png

当然也非常好看,只不过没有上面那个那么惊艳。

CodePen -- One Line CSS Pattern

我们可以再利用 CSS - Doodle,随机产生这份美:

4.gif

CSS - Doodle 它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面,并且提供各种便捷的指令及函数(随机、循环等等),让我们能通过一套规则,得到不同 CSS 效果。

没错,它的本质其实就是上述的那一行核心 CSS 代码。

CSS Doodle - CSS Magic Conic-gradient

margin: autoplace-items: center

这个也非常有意思,当然,它不算严格意义上的一行 CSS,因为需要搭配其他属性一起使用。

最快水平垂直居中一个元素的方法是什么?

水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这两种方法应该算是最便捷的了:

方法一:flex 布局下的 margin: auto

<div class="g-container">
    <div class="g-box"></div>
</div>
.g-container {
    display: flex;
}

.g-box {
    margin: auto;
}
上面的 display: flex 替换成 display: inline-flex | grid | inline-grid 也是可以的。

display: flex 布局下, margin auto 的生效不仅是水平方向,垂直方向也会自动去分配这个剩余空间。

CodePen Demo -- 使用 margin auto 水平垂直居中元素

如果你对非常有用的 margin: auto 还不是很了解,可以看看:探秘 flex 上下文中神奇的自动 margin

方法二:grid 布局下的 place-items: center

直接上代码:

.g-container {
    display: grid;
    place-items: center
}

上述两份代码效果都是一样的:

5.gif

CodePen Demo -- 水平垂直居中元素 grid+ place-items: center

最后

一行 CSS 能干什么?肯定不止这些,当然,这不就是 CSS 的乐趣么。想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 😄

6.png

好了,本文到此结束,希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

赞 10 收藏 4 评论 1

chokcoco 发布了文章 · 2020-02-12

CSS 故障艺术

v2-c7a2db16babbdefec756d3eed6bc0fa4_hd

本文的主题是 Glitch Art,故障艺术。

什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉,看起来具有闪烁、震动的效果,很吸引人眼球。

故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到今天的数码时代,这种故障一直是观众非常熟悉的现象。即使抖音的 LOGO 只是静态的,大脑也会自己补完整个效果,甚至还会自己脑补信号干扰的噪音。

当然,广义的故障艺术不仅仅指这种效果,我觉得是很宽泛的,本文将介绍一些 CSS 能够模拟完成的故障艺术效果。

使用混合模式实现抖音 LOGO

首先从静态的开始,抖音的 LOGO 就是很好的一个例子。

image

它看着像是 3 个 J 形重叠在一起。而实际上,是两个 J 形重叠在一起,重叠部分表现为白色,这个特性,使用 CSS 的混合模式 mix-blend-mode 非常好实现,而单个 J 形示意图如下:

image

图片来源于知乎:为什么抖音的标志,看起来具有“电”“闪烁”“震动”的感觉?

单个 J 形其实是由 3/4圆 + 竖线 + 1/4圆组成,使用一个标签即可完成(加上两个伪元素)。

关键点

  • 主要借助伪元素实现了整体 J 结构,借助了 mix-blend-mode 实现融合效果
  • 利用 mix-blend-mode: lighten 混合模式实现两个 J 形结构重叠部分为白色

所以整个效果只需要两个标签:

<div class="j"></div>
<div class="j"></div>

简易 SASS 代码:

// 实现第一个 J
.j {
    position: absolute;

    &::before {
        content: "";
        ...
    }

    &::after {
        content: "";
        ...
    }
}

// 实现第二个 J,加上混合模式
.j:last-child {
    position: absolute;
    mix-blend-mode: lighten;

    &::before {
        content: "";
        ...
    }
    &::after {
        content: "";
        ...
    }
}

示意图如下(为了更好理解,加上了动画):

tiktok

完整的 DEMO:

使用 mix-blend-mode 实现抖音 LOGO

图片的 Glitch Art 风

当然,上面实现的是我们实现的 J 形的叠加,理解了这种技巧之后,我们可以把它运用到图片之上。

这里我们会运用到 background-blend-modemix-blend-mode

假设,我们有这样一张图:

image

只需要一个标签即可

<div class="mix"></div>

给两张同样的图片,叠加上 青色#0ff 和 红色#f00,并且错开一定的距离,两张图都要加上 background-blend-mode: lighten,其中一张再加上 mix-blend-mode: darken

.mix {
    width: 400px;
    height: 400px;
    background: url($img), #0ff;
    background-blend-mode: lighten;

  &::after {
    content: '';
    position: absolute;
    margin-left: 10px;
    width: 400px;
    height: 400px;
    background: url($img), #f00;
    background-blend-mode: lighten;
    mix-blend-mode: darken;
  }
}

得到如下效果:

image

这里与上述抖音 LOGO 的处理是有点不一样的,使用的混合模式也不止一种,简单解释下。

  1. 因为图片本身不是红色和青色的,所以需要通过 background-image 叠加上这两种颜色,并通过 background-blend-mode: lighten 让其表现出来
  2. 为了保持中间叠加部分的原色,需要再叠加一个 mix-blend-mode: darken 反向处理一下。(不理解的同学可以打开调试,手动关掉几个混合模式,自己感受感受即可)

完整的 DEMO:

图片的类抖音 LOGO Glitch 效果

动态类抖音风格 Glitch 效果

OK,有了上面的铺垫,我们接下来可以给这种效果加上动画。

关键点

  • 利用 mix-blend-mode: lighten 混合模式实现两段文字结构重叠部分为白色
  • 利用元素位移完成错位移动动画,形成视觉上的冲击效果

看看效果:

textglitch

本文篇幅有点长,代码就不上了,完整 DEMO 在这里:

类抖音 LOGO 文字故障效果

当然,我们也不是一定要使用混合模式去使得融合部分为白色,可以仅仅是使用这个配色效果,基于上面效果的另外一个版本,没有使用混合模式。

关键点

  • 利用了伪元素生成了文字的两个副本
  • 视觉效果由位移、遮罩、混合模式完成
  • 配色借鉴了抖音 LOGO 的风格

textglitch2

完整 DEMO 在这里:

CSS文字故障效果

仅仅使用配色没有使用混合模式的好处在于,对于每一个文字的副本,有了更大的移动距离和可以处理的空间。

Glitch Art 风格的 404 效果

稍微替换一下文本文案为 404,再添加上一些滤镜效果(hue-rotate()blur())嘿嘿,找到了一个可能实际可用的场景:

效果一:

404

效果二:

404

两个 404 效果的 Demo 如下:

其他配色效果

当然,不仅仅只有这一种红 + 青的配色效果。还有一些其他的配色及混合模式的搭配,如 黄 + 粉红 + 蓝配合 mix-blend-mode: multiply

然后,有的时候,效果不希望和背景混合在一起,可以使用 isolation: isolate 进行隔离。


好,上述效果可以归类为一个分类。接下来开启下一个分类

clip-path 登场

下半篇幅的主角主要是 clip-path

clip-path 一个非常有意思的 CSS 属性。

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。

也就是说,使用 clip-path 可以将一个容器切成我们想要的样子。

例如这样:

<div>TXET</div>
div  {
    margin: auto;
    padding: 10px;
    line-height: 1.2;
    font-size: 60px;
    background: #ddd;
}

正常是这样的:

image

使用 clip-path 剪裁为一个平行四边形:

div  {
    margin: auto;
    padding: 10px;
    line-height: 1.2;
    font-size: 60px;
    background: #ddd;
+   clip-path: polygon(35% 0, 85% 0, 75% 100%, 25% 100%);
}

结果如下:

image

那么,思路就有了,我们可以将一个文字复制几个副本,重叠在一起,再分别裁剪这几个副本进行位移动画即可。

使用 clip-path 实现文字断裂动画

我们还是使用元素的 ::before::after 两个伪元素复制两份副本,再分别使用 clip-path 进行剪裁,再使用 transform 进行控制。

核心代码:

<div data-text="Text Crack">
    <span>Text Crack</span>
</div>
div {
    position: relative;
    animation: shake 2.5s linear forwards;
}

div span {
    clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}

div::before,
div::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
}

div::before {
    animation: crack1 2.5s linear forwards;
    clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}

div::after {
    animation: crack2 2.5s linear forwards;
    clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}

// 元素晃动,断裂前摇
@keyframes shake {    
    ...
}

@keyframes crack1 {
    0%,
    95% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-55%, -45%);
    }
}

@keyframes crack2 {
    0%,
    95% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-45%, -55%);
    }
}

可以得到这样的效果:

textcrack

完整的 Demo:

clip-path 实现文字断裂效果

这个效果,最早的版本见于这位作者:George W. Park

clip-path 的 Glitch Art

OK,继续,有了上面的铺垫之后,接下来,我们把这个效果作用于图片之上,并且再添加上动画。

随便选一张图片:

image

哇哦,非常的赛博朋克。

实现动画的关键在于:

  • 使用元素的两个伪元素,生成图片的两个副本
  • 使用 clip-path 对两个副本图片元素进行裁剪,然后进行位移、transform变换、添加滤镜等一系列操作。

简单贴一下伪代码:

<div></div>
$img: "https://mzz-files.oss-cn-shenzhen.aliyuncs.com///uploads/U1002433/0cb5e044a1f0f7fc15f61264ee97ac1f.png";

div {
    position: relative;
    width: 658px;
    height: 370px;
    background: url($img) no-repeat;
    animation: main-img-hide 16s infinite step-end;
}

div::before,
div::after {
    position: absolute;
    width: 658px;
    height: 370px;
    top: 0;
    left: 0;
    background: inherit;
}

div::after {
    content: "";
    animation: glitch-one 16s infinite step-end;
}

div::before {
    content: "";
    animation: glitch-two 16s infinite 1s step-end;
}

@keyframes glitch-one {
    @for $i from 20 to 30 {
        #{$i / 2}% {
            left: #{randomNum(200, -100)}px;
            clip-path: inset(#{randomNum(150, 30)}px 0 #{randomNum(150, 30)}px);
        }
    }

    15.5% {
        clip-path: inset(10px 0 320px);
        left: -20px;
    }
    16% {
        clip-path: inset(10px 0 320px);
        left: -10px;
        opacity: 0;
    }
    ....
}

@keyframes glitch-two {
    @for $i from 40 to 50 {
        #{$i / 2}% {
            left: #{randomNum(200, -100)}px;
            clip-path: inset(#{randomNum(180)}px 0 #{randomNum(180)}px);
        }
    }

    25.5% {
        clip-path: inset(10px 0 320px);
        left: -20px;
    }
    26% {
        clip-path: inset(10px 0 320px);
        left: -10px;
        opacity: 0;
    }
   ...
}

@keyframes main-img-hide {
    5% {
        filter: invert(1);
    }
    ...
}

由于动画部分代码量太多,所以使用了 SASS 循环函数随机生成了部分。如果手动控制,效果其实还会更好,当然,调试动画消耗的时间会更多。

看看效果,虽然 CSS 能力有限,但实际的效果也不是说那么的差:

imgglitch

GIF 图太大,掉帧太多,效果大打折扣。完整的 Demo 及效果,你可以戳这里:

clip-path 实现图片的故障艺术风格动画

总结

本文重点介绍了纯 CSS 下使用混合模式和 clip-path 实现的一些故障艺术(Glitch Art),当然,上述的几个效果都不仅仅是靠这两个属性单打独斗就能完成的。

在其中,transformfilter 也在其中发挥了很重要的作用。当然仅仅使用 transformfilter 也能够实现一些基础的故障艺术效果,这个读者们感兴趣的可以自己多加尝试。如果想使用于生产环境,需要考虑 mix-blend-modeclip-path 的兼容性问题。

我自己对 Glitch Art 的理解其实也比较浅显,只是觉得使用 CSS 去实现这样一些类似的效果比较有意思,就动手尝试实践了一番,相关术语或者名词理解错误烦请各位谅解指出。

最后

好了,本文到此结束,希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

更多精彩有趣的 CSS 效果,欢迎来这里看看 CSS 灵感 -- 在这里找到写 CSS 的灵感

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

赞 54 收藏 35 评论 3

chokcoco 赞了文章 · 2019-08-21

红黑树,超强动静图详解,简单易懂

写在前面

红黑树,对很多童鞋来说,是既熟悉又陌生。学校中学过,只了解大概;工作中不怎么使用,但面试又是重点。每次需要查看红黑树内容时都很难以更生动形象的方式来理解其内容。没错,本文内容就是要解决这个问题,用简单的语言,搭配静图和动图(利用大脑图形记忆方式),让你对红黑树有更深入的了解和更清晰的记忆,希望小伙伴们再次遇到红黑树的问题不至于头大,建议读该文章姿势: 打开两个页面,一个页面看图片和内容,一个页面看公式,像玩魔方一样,多玩几次就明白了

通过工具 (公众号回复「工具」—>那些可以提高效率的工具—>红黑树) 动态感受红黑树的转换过程

俺家司令买完东西后,我俩经常会发生这样的一段对话:

司令:你猜我买的这个多少钱?
我: 1000
司令: 高了
我: 500
司令: 低了:
我: 750
...... 直到最后猜中

这样说大家应该已经猜到了是「二分查找法」,通过这个例子我想要引出的是 ,来看图片


程序中的树其实是我们日常看到的树的倒影,或者发挥一下想象,倒影也可以是树根

二叉查找树

二叉查找树,Binary Search Tree 「BST」,要想了解二叉查找树,我们首先看下二叉查找树有哪些特性呢?

  1. 某节点的左子树节点值仅包含小于该节点值
  2. 某节点的右子树节点值仅包含大于该节点值
  3. 左右子树每个也必须是二叉查找树

看个图就轻松理解上面三句话的意思了:

上图,结合二叉查找树的三条约束来看,非常好,没有什么问题。再来看一个图,依旧符合上面三条约束,感觉有问题吗?

  1. 这是一个走路一米六,一米八的树
  2. 这是一个畸形的树,大风一挂很可能被折断的树

从程序的角度来说这个树不够平衡,查找次数或时间复杂度 O(h)可能会随着一条腿长无限增长

理科生在高中学习生物时学过一个关键字「去除顶端优势」,通过去除植物顶端优势,侧芽会迅速生长,慢慢变得强壮和平衡, 红黑树其实就是去除二叉查找树顶端优势的解决方案,从而达到树的平衡

红黑树

红黑树,Red-Black Tree 「RBT」是一个自平衡(不是绝对的平衡)的二叉查找树(BST),树上的每个节点都遵循下面的规则:

  1. 每个节点都有红色或黑色
  2. 树的根始终是黑色的 (黑土地孕育黑树根,😄)
  3. 没有两个相邻的红色节点(红色节点不能有红色父节点或红色子节点,并没有说不能出现连续的黑色节点
  4. 从节点(包括根)到其任何后代NULL节点(叶子结点下方挂的两个空节点,并且认为他们是黑色的)的每条路径都具有相同数量的黑色节点

瞬间懵逼?了解一下印象就行,开始玩魔方都是要照着魔方公式一点点玩的,多玩几次就熟悉了。红黑树也一样,红黑树有两大操作:

  1. recolor (重新标记黑色或红色)
  2. rotation (旋转,这是树达到平衡的关键)

我们会先尝试 recolor,如果 recolor 不能达到红黑树的 4 点要求,然后我们尝试 rotation,其实红黑树的关键玩法就是弄清楚 recolor 和 rotation 的规则,接下来看看详细的算法公式吧 千万别着急记忆公式,有图示会逐步说明,就像魔方一样,多玩几次就懂了:
假设我们插入的新节点为 X

  1. 将新插入的节点标记为红色
  2. 如果 X 是根结点(root),则标记为黑色
  3. 如果 X 的 parent 不是黑色,同时 X 也不是 root:

    • 3.1 如果 X 的 uncle (叔叔) 是红色

      • 3.1.1 将 parent 和 uncle 标记为黑色
      • 3.1.2 将 grand parent (祖父) 标记为红色
      • 3.1.3 让 X 节点的颜色与 X 祖父的颜色相同,然后重复步骤 2、3

话不多说,看下图

跟着上面的公式走:

  1. 将新插入的 X 节点标记为红色
  2. 发现 X 的 parent (P) 同样为红色,这违反了红黑树的第三条规则「不能有两个连续相邻的红色节点」
  3. 发现 X 的 uncle (U) 同样为红色
  4. 将 P 和 U 标记为黑色
  5. 将 X 和 X 的 grand parent (G) 标记为相同的颜色,即红色,继续重复公式 2、3
  6. 发现 G 是根结点,标记为黑色
  7. 结束

刚刚说了 X 的 uncle 是红色的情况,接下来要说是黑色的情况

  1. 如果 X 的 parent 不是黑色,同时 X 也不是 root:

    • 3.2 如果 X 的 uncle (叔叔) 是黑色,我们要分四种情况处理

      • 3.2.1 左左 (P 是 G 的左孩子,并且 X 是 P 的左孩子)
      • 3.2.2 左右 (P 是 G 的左孩子,并且 X 是 P 的右孩子)
      • 3.2.3 右右 (和 3.2.1 镜像过来,恰好相反)
      • 3.2.4 右左 (和 3.2.2 镜像过来,恰好相反)

当出现 uncle 是黑色的时候我们第一步要考虑的是 旋转 ,这里先请小伙伴不要关注红黑树的第 4 条规则,主要是为了演示如何旋转的,来一点点看,不要看图就慌,有解释的😜:

左左情况

这种情况很简单,想象这是一根绳子,手提起 P 节点,然后变色即可

左右

左旋: 使 X 的父节点 P 被 X 取代,同时父节点 P 成为 X 的左孩子,然后再应用 左左情况

右右

与左左情况一样,想象成一根绳子

右左

右旋: 使 X 的父节点 P 被 X 取代,同时父节点 P 成为 X 的右孩子,然后再应用 右右情况

你说的动图在哪里,你个大骗子,别着急,现在就为小伙伴们奉上动图演示,来说明公式的使用:

案例一

插入 10,20,30,15 到一个空树中
  1. 向空树中第一次插入数字 10,肯定是 root 节点
  2. root 节点标记成黑色

  1. 向树中插入新节点 20,标记为红色
  2. 20 > 10,并发现 10 没有叶子节点,将新节点 20 作为 10 的右孩子

  1. 向树中插入新节点 30,标记为红色
  2. 30 > 10,查找 10 的右子树,找到 20
  3. 30 > 20,继续查找 20 的右子树,发现 20 没有叶子节点,将值插在此处
  4. 30 和 20 节点都为红色,30 为右孩子,20 也为右孩子,触发了 右右情况
  5. 通过一次旋转,提起 20 节点
  6. 20 节点是根结点,标记为黑色

  1. 向树中插入新节点 15,标记为红色
  2. 通过比对大小和判断是否有叶子节点,最终插值为 10 节点的右孩子
  3. 15 和 10 节点都为红色,15 的 uncle 节点 30 也为红色
  4. 按照公式,将 15 的 parent 10 和 uncle 30 更改为黑色
  5. 让 15 节点 grand parent 20 的颜色与 15 节点的颜色一样,变为红色
  6. 20 为根结点,将其改为黑色

继续插入其他节点只不过反复应用上面的公式,上面应用到的红黑树工具,可以暂停动画效果,一帧一帧的看红黑树的转换过程,这样通过练习,查看公式,观察变化三管齐下,红黑树的入门理解应该完全不再是问题了

灵魂追问

  1. jdk 1.8 HashMap 中有使用到红黑树,你知道触发条件是什么吗?有读过源码是如何 put 和 remove 的吗?
  2. 这里讲的是红黑树的 insert,delete 又是什么规则呢?
  3. 哪些场景可以应用红黑树?
  4. 你了解各种树的时间复杂度吗?
  5. 留个小作业,应用工具将 [10 70 32 34 13 56 32 56 21 3 62 4 ] 逐个插入到树中,理解红黑树 recolor 和 rotation 的转换规则

提高效率工具

[center]


推荐阅读


欢迎持续关注公众号:「日拱一兵」

  • 前沿 Java 技术干货分享
  • 高效工具汇总 | 回复「工具」
  • 面试问题分析与解答
  • 技术资料领取 | 回复「资料」
以读侦探小说思维轻松趣味学习 Java 技术栈相关知识,本着将复杂问题简单化,抽象问题具体化和图形化原则逐步分解技术问题,技术持续更新,请持续关注......
查看原文

赞 97 收藏 66 评论 6

chokcoco 发布了文章 · 2019-08-12

你所不知道的 CSS 负值技巧与细节

写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢?

使用负值 outline-offset 实现加号

假设我们有这样一个简单的结构:

<div></div>
div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: 10px;
}

offset

修改 outline-offset 到一个合适的负值 ,那么在恰当的时候,outline 边框就会向内缩进为一个加号。

经过一番尝试,修改上述 div 的 outline-offset为 -118px。

div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: -118px;
}

加个动画效果,大概是这样:

offset

CodePen Demo -- 使用outline实现加号

很有意思,我尝试了很多不同的情况,最后总结了一个简单的规律,要使用负的 outline-offset 生成一个加号有一些简单的限制:

  • 容器得是个正方形
  • outline 边框本身的宽度不能太小
  • outline-offset 负值 x 的取值范围为:
    -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度)

在这个例子后,我又想,CSS 属性可以取负值的地方有很多。大家最为熟知的就是负margin,使用负的 marign,可以用来实现类似多列等高布局、垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢?

下文就再介绍一些 CSS 负值有意思的使用场景。

单侧投影

先说单侧投影,关于 box-shadow,大部分时候,我们使用它都是用来生成一个两侧的投影,或者一个四侧的投影。如下:

image

OK,那如果要生成一个单侧的投影呢?

我们来看看 box-shadow 的用法定义:

{
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
}

box-shadow: 1px 2px 3px 4px #333 为例,4 个数值的含义分别是,x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。

这里有一个小技巧,扩张半径可以为负值

继续,如果阴影的模糊半径,与负的扩张半径一致,那么我们将看不到任何阴影,因为生成的阴影将被包含在原来的元素之下,除非给它设定一个方向的偏移量。所以这个时候,我们给定一个方向的偏移值,即可实现单侧投影:

image

CodePen Demo -- css单侧投影

使用 scale(-1) 实现翻转

通常,我们要实现一个元素的 180° 翻转,我们会使用 transform: rotate(180deg),这里有个小技巧,使用 transform: scale(-1) 可以达到同样的效果。看个 Demo:

<p class="scale">CSS Nagative Scale(-1)</p>
.scale {
    transform: scale(1);
    animation: scale 10s infinite linear;
}

@keyframes scale{
    50% {
        transform: scale(-1);
    }  
    100% {
        transform: scale(-1);
    }
}

看看效果:

scale-1

GIF 中第一行是使用了 transform: rotate(180deg) 的效果

CodePen Demo -- 使用 scale(-1) 实现元素的翻转

使用负 letter-spacing 倒序排列文字

与上面 scale(-1) 有异曲同工之妙的是负的 letter-spacing

letter-spacing 属性明确了文字的间距行为,通常而言,除了关键字 normal,我们还可以指定一个大小,表示文字的间距。像这样:

<p class="letter_spacing">倒序排列文字</p>
.letter_spacing {
    font-size: 36px;
    letter-spacing: 0px;
    animation: move 10s infinite;
}

@keyframes move {
    40% {
        letter-spacing: 36px;
    }
    80% {
        letter-spacing: -72px;
    }
    100% {
        letter-spacing: -72px;
    }
}

我们设置文字的 letter-spacing 从 0 -> 36px -> -72px,观察不同的变化:

letter-spacing

CodePen Demo -- 负letter-spacing倒序排列文字

然而,受到中英文混排或者不同字体的影响,以及倒序后的排列方式,不建议使用这种方式来倒序排列文字。

transition-delay 及 animation-delay 的负值使用,立刻开始动画

我们知道,CSS 动画及过渡提供了一个 delay 属性,可以延迟动画的进行。

考虑下面这个动画:

transition-delay2

简单的代码大概是这样:

<div class="g-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.item {
    transform: rotate(0) translate(-80px, 0) ;
}

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}

.item:nth-child(2) {
    animation: rotate 3s infinite 1s linear;
}

.item:nth-child(3) {
    animation: rotate 3s infinite 2s linear;
}


@keyframes rotate {
    100% {
        transform: rotate(360deg) translate(-80px, 0) ;
    }
}

如果,我们想去掉这个延迟,希望在一进入页面的时候,3 个球就是同时运动的。这个时候,只需要把正向的 animation-delay 改成负向的即可。

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}

.item:nth-child(2) {
    animation: rotate 3s infinite -1s linear;
}

.item:nth-child(3) {
    animation: rotate 3s infinite -2s linear;
}

这里,有个小技巧,被设置了 animation-dealy 为负值的动画会立刻执行,开始的位置是其动画阶段中的一个阶段。所以,动画在一开始的时刻就是下面这样:

transition-delay

以上述动画为例,一个被定义执行 3s 的动画,如果 animation-delay 为 -1s,起点相当于正常执行时,第2s(3-1)时的位置。

CodePen Demo -- 使用负值 animation-delay 提前执行动画

负值 margin

负值 margin 在 CSS 中算是运用的比较多的,元素的外边距可以设置为负值。

在 flexbox 布局规范还没流行之前,实现多行等高布局还是需要下一番功夫的。其中一种方法便是使用正 padding 负 margin 相消的方法。

有如下一个布局:

<img width="890" alt="paddingmargin" data-original="https://user-images.githubuse...;>

左右两栏的内容都是不确定的,也就是高度未知。但是希望无论左侧内容较多还是右侧内容较多,两栏的高度始终保持一致。

OK,其中一种 Hack 办法便是使用一个很大的正 padding 和相同的负 margin 相消的方法填充左右两栏:

.g-left {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

.g-right {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

可以做到无论左右两栏高度如何变化,高度较低的那一栏都会随着另外一栏变化。

具体的代码可以看看这里:CodePen Demo -- 正padding负margin实现多列等高布局

总结一下

另外,还有一些大家熟知的没有单独列出来的,譬如:

  • 使用负 marign 实现元素的水平垂直居中
  • 使用负 marign隐藏列表 li 首尾多余的边框
  • 使用负 text-indent 实现文字的隐藏
  • 使用负的 z-index 参与层叠上下文排序

还有一些很深奥的,譬如张鑫旭大大在今年的 CSS 大会上分享的,利用负的 opacity 在 CSS 中实现了伪条件判断,配合 CSS 自定义属性,使用纯 CSS 实现 360° 的饼图效果:

最后

额,虽然 CSS 负值的一些使用场景的确有有用之处,但是与此同时有可能带来的是代码可读性的下降。有的时候看到这些代码不得不好好捋一捋才能缓过神来,再感叹一句,原来如此。

如果有其他更好的更易理解的实现方式,具体使用实现的时候应该好好权衡一下。

好了,本文到此结束,希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

赞 22 收藏 16 评论 0

chokcoco 发布了文章 · 2019-06-20

CSS 属性选择器的深入挖掘

CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素。

属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场景下的不同用法。

简单的语法介绍

  • [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
  • [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
  • [attr~=val]:该选择器仅选择具有 attr 属性的元素,而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

子串值(Substring value)属性选择器,

下面几个属于 CSS3 新增语法,也被称为“伪正则选择器”,因为它们提供类似 regular expression 的灵活匹配方式。

  • [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素(注意,这里的 “-” 不是一个错误,这是用来处理语言编码的)。
  • [attr^=val] : 选择attr属性的值以 val 开头(包括 val)的元素。
  • [attr$=val] : 选择attr属性的值以 val 结尾(包括 val)的元素。
  • [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素(一个子字符串就是一个字符串的一部分而已,例如,”cat“ 是 字符串 ”caterpillar“ 的子字符串

CSS 属性选择器的最基本用法

属性选择器最基本的用法,就是通过元素的属性值去选择 DOM 元素。像这样,将选中所有带 href 属性的DOM 元素:

[href] {
    color: red;
}

CodePen Demo -- 属性选择器基本用法

复杂一点点的用法

层叠选择

div [href]{
...
}

多条件复合选择

选择一个 img 标签,它含有 title 属性,并且包含类名为 logo 的元素。

img[title][class~=logo]{
...
}

伪正则写法

  • i 参数

忽略类名的大小写限制,选择包含 class 类名包含子字符串为 text,Text,TeXt... 等情况的 p 元素。
这里的 i 的含义就是正则里面参数 i 的含义,ignore,忽略大小写的意思。

p[class*="text" i] {
...
}

所以上面的选择器可以选中类似这样的目标元素:

<p class="text"></p>
<p class="nameText"></p>
<p class="desc textarea"></p>
  • g 参数

与正则表达式不一样,参数 g 在这里表示大小写敏感(case-sensitively)。然而,这个属性当前仍未纳入标准,支持的浏览器不多。

CodePen Demo -- 属性选择器的伪正则用法

配合 :not() 伪类

还有一种比较常用的场景就是搭配:not() 伪类,完成一些判断检测性的功能。譬如下面这个选择器,就可以选取所有没有 [href] 属性的 a 标签,添加一个红色边框。

a:not([href]){
    border: 1px solid red;
}

当然,复杂一点,我们可以搭配不仅仅一个 :not()伪类,像是这样,可以同时多个配合使用,选择一个 href, target, rel 属性都没有的 a 标签:

a:not([href]):not([target]):not([rel]){
    border: 1px solid blue;
}

CodePen Demo -- 属性选择器配合 :not 伪类

重写行内样式?

甚至乎,如果有这种场景,我们还可以覆盖掉行内样式,像这样:

<p style="height: 24px; color: red;">xxxxxx</p>

我们可以使用属性选择器强制覆盖掉上述样式:

[style*="color: red"] {
    color: blue !important;
}

组合拳用法,搭配伪元素提升用户体验

当然,属性选择器不一定只是单单的进行标签的选择。

配合上伪元素,我们可以实现很多有助提升用户体验的功能。

角标功能

这里有一个小知识点,伪元素的 content 属性,通过 attr(xxx),可以读取到对应 DOM 元素标签名为 xxx 的属性的值。

所以,配合属性选择器,我们可以很容易的实现一些角标功能:

<div count=“5“>Message</div>
div {
    position: relative;
    width: 200px;
    height: 64px;
}

div::before {
    content: attr(count);
    ...
}

image

这里右上角的数字 5 提示角标,就是使用属性选择器配合伪元素实现,可以适应各种长度,以及中英文,能够节省一些标签。CodePen Demo -- 属性选择器实现角标功能

属性选择器配合伪元素实现类 title 功能

我们都知道,如果给一个图片添加一个 title 属性,当 hover 到图片上面的时,会展示 title 属性里面附加的内容,类似这样:

<img data-original="xxxxxxxxx" title="风景图片">

attributeselector

这里不一定是 img 标签,其他标签添加 title 属性都能有类似的效果。但是这里会有两个问题:

  • 响应太慢,通常鼠标 hover 上去要隔 1s 左右才会出现这个 title 框
  • 框体结构无法自定义,弹出框的样式无法自定义

所以这里,如果我们希望有一些自己能够控制样式的可快速响应的浮层,可以自定义一个类 title 属性,我们把它称作 popTitle,那么可以这样操作:

<p class="title" popTitle="文字弹出">这是一段描述性文字</p>
<p class="title" popTitle="标题A">这是一段描述性文字</p>
p[popTitle]:hover::before {
    content: attr(popTitle);
    position: absolute;
    color: red;
    border: 1px solid #000;
    ...
}

对比一下,第一个是原生自带的 title 属性,下面两个是使用属性选择器配合伪元素模拟的提示:

attributeselector2

浏览器自带的 title 属性延迟响应是添加一层防抖保护,避免频繁触发,这里也可以通过对伪元素添加一个100毫秒级的 transition-delay 实现延迟展示。

CodePen Demo -- 属性选择器配合伪元素实现类 title 功能

商品展示提示效果

好,上面的运用实例我们再拓展一下,考虑如何更好的运用到实际业务中,其实也是有很多用武之地的。譬如说,通过属性选择器给图片添加标签,类似一些电商网站会用到的一个效果。

我们希望给图片添加一些标签,在 hover 图片的时候展示出来。

当然,CSS 中,诸如 <img><input><iframe>,这几个标签是不支持伪元素的。

所以这里我们输出 DOM 的时候,给 img 的父元素带上部分图片描述标签。通过 CSS 去控制这些标签的展示:

<div class="g-wrap" desc1="商品描述AAA" desc2="商品描述BBB">
    <img data-original="https://xx.baidu.com/timg?xxx" >    
</div>
[desc1]::before,
[desc2]::after {
    position: absolute;
    opacity: 0;
}

[desc1]::before {
    content: attr(desc1);
}

[desc2]::after {
    content: attr(desc2);
}

[desc1]:hover::before,
[desc2]:hover::after{
    opacity: 1;
}

看看效果:

attributeselector4

CodePen Demo -- 通过属性选择器给图片添加标签

属性选择器配合伪元素实现下载提示

我们知道,HTML5 对标签新增了一个 download 属性,此属性指示浏览器下载 URL 而不是导航到它。

那么,我们可以利用属性选择器对所有带此类标签的元素进行提示。像这样:

<a href="https://www.xxx.com/logo.png" download="logo">logo</a>
[download] {
    position: relative;
    color: hotpink;
}

[download]:hover::before {
    content: "点击可下载此资源!";
    position: absolute;
    ...
}

当我们 hover 到这个链接的时候,就会这样,提示用户,这是一个可以下载的按钮:

attributeselector3

CodePen Demo -- 属性选择器配合伪元素做下载提示

属性选择器配合伪元素对链接的协议进行提示(http/https)

现在大部分网站不是切了 https 就是走在切 https 的路上。如果页面上的链接很多或者对跳转页面的协议有要求,使用属性选择器配合伪元素对链接的协议进行提示也不失为一种好方法。

a[href^="http:"]:hover::before {
    content: "这是一个http链接";
    ...
}

a[href^="https:"]:hover::before {
    content: "这是一个https链接";
}

CodePen Demo -- 属性选择器配合伪元素对链接的协议进行提示(http/https)

当然,伪元素的内容不一定是纯文字的,为了给用户更好的体验,图或者图片加文字也是可以的。

譬如我们可以形象化地给 https 链接站点再加一个小绿锁,符合用户的一些常规认知。

image

这里我将小绿锁的图片使用 base64 嵌入到伪元素当中,简单的使用 text-indent 控制图文的排布:

a[href^="https:"]:hover::before {
    content: "";
    padding-left: 16px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAb0lEQVQoz2NkQAJc5aIc//7962VgYIiDCi1iYmIq/tb5+gdMDROyBqhiGWYmJlVmJiZVBgYGGagYdsBRKvyZu1xUAsbnLheV4CgV/oxbQ4nwf0JiTAwkAkaIU4QaGf4z1uFX+b/pR/e7epJtGJEaAKDXHzEJ3KYmAAAAAElFTkSuQmCC");
    ...
}

attributeselector5

这里只是一个非常小的 Demo,实际情况是大部分用户并不了解这个小绿锁的含义,所以实际使用应该搭配文字辅助提示。

CodePen Demo -- 属性选择器配合伪元素对https协议进行图文提示

属性选择器对文件类型的处理

也可以对一些可下载资源进行视觉上 icon 的提示。

<ul>
    <li><a href="xxx.doc">Word File</a></li>
    <li><a href="xxx.ppt">PPT File</a></li>
    <li><a href="xxx.PDF">PDF File</a></li>
    <li><a href="xxx.MP3">MP3 File</a></li>
    <li><a href="xxx.avi">AVI File</a></li>
</ul>
a[href$=".doc" i]::before {
    content: "doc";
    background: #a9c4f5;
}
a[href$=".ppt" i]::before {
    content: "ppt";
    background: #f8e94f;
}
a[href$=".pdf" i]::before {
    content: "pdf";
    background: #fb807a;
}
a[href$=".mp3" i]::before {
    content: "mp3";
    background: #cb5cf5;
}
a[href$=".avi" i]::before {
    content: "avi";
    background: #5f8ffc;
}

image

CodePen Demo -- 属性选择器选择文件名后缀

属性选择器对 input 类型的处理

属性选择器其实对 input 类型的元素是一个很好的帮手,因为 input 常用,且经常搭配很多不同功能的属性值。

只不过,由于 input 类型无法添加伪元素。所以搭配属性选择器更多的通过属性的各种状态改变自身的样式。

简单举个例子,譬如:

<input type="text">
<input type="text" disabled>
input[type=text][disabled] { 
    border: 1px solid #aaa;
    background: #ccc; 
}

这里,我们选择了 type=text 并且拥有 disabled 属性的 input 元素,将它的背景色和边框色设置为灰色。给与用户更好的视觉提示。

image

值得注意的点

注意选择器优先级 ,.class[class=xxx] 是否等价

考虑这个问题,下面两个选择器是否等值?

<div class="header">
.header {
    color: red;
}

[class~="header"] {
    color: blue;
}

上述两个选择器,作用完全一致。然而,如果是下面这种情况,两者就不一样了:

<div id="header">
#header{
    color: red;
}

[id="header"] {
    color: blue;
}

这里,ID 选择器#header比属性选择器[id="header"]的权重更高,虽然两者能够选择同样的元素,但是两者并不完全等价。

是否需要引号?

考虑下面三种情况,是否一致?

[class="header"]{ ... }

[class='header']{ ... }

[class=header]{ ... }

事实上,从 HTML2 开始,不添加引号的写法就已经得到支持,所以上述三种写法都是正确的。

然而,能够不使用引号也是有限制的,再看看下面这种写法:

a[href=bar] { ... }

a[href^=http://] {... }

第二个选择器是个无效选择器,:// 不引起来的话会识别错误,必须使用引号引起来像这样a[href^="http://"] ,这里具体的原因可以看看这篇文章:Unquoted attribute value validator

所以保险起见,建议都加上引号。

CSS 语义化

编写”具有语义的HTML”原则是现代、专业前端开发的一个基础。当然,我们经常谈论到的都是 HTML 语义化。

那么,CSS 需要语义化吗?CSS 有语义化吗?例如上述的例子,使用特定的类名或者 id 选择器皆可完成。那么使用属性选择器的理由是什么?

我的理解是,属性(attribute)本身已经具有一定的语义,表达了元素的某些特征或者功能,利用属性选取元素再进行对该属性值的特定操作,一定程度上也可以辅助提升代码的语义化。至少的提升了 CSS 代码的可读性。但是 CSS 是否需要语义化这个问题就见仁见智了。

最后

这里有几篇文章还涵盖了很多其他方面使用,可以对比观看:

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

最后,新开通的公众号求关注,形式希望是更短的篇幅,质量更高一些的技巧类文章,包括但不局限于 CSS:

image

查看原文

赞 15 收藏 14 评论 1

chokcoco 赞了文章 · 2019-06-19

[译] 前端项目中常见的 CSS 问题

快速摘要:近年来,跨浏览器的渲染和交互已经愈加一致。不过,它仍然没有达到完全一致,有很多小问题会让你出错。除了这些问题之外,还有不同的屏幕尺寸、语言偏好和明显的人为错误等不确定因素,我们从中发现了许多会让开发者出错的小问题。

在浏览器中实现用户界面时,最好是尽可能地减小这些差异和问题,以便 UI 呈现出预测的样子。记住所有的这些差异是很困难的,所以我列举了一系列常见问题以及解决方案。当你在做一个新项目的时候,可以将其作为一份方便的参考指南。

我们开始吧。

1. 重置 buttoninput 元素的背景

添加按钮时,重置它的背景,否则在跨浏览器时它的呈现会有所不同。下面的例子分别展示了 Chrome 和 Safari 中的同一个按钮,后者默认会有一个灰色背景。

(大图预览)

重置背景可以解决这个问题:

button {
    appearance: none;
    background: transparent;
    /* 其它样式 */
}

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed(@shadeed)在 Codepen 上的代码 按钮和输入框

2. Overflow: scrollauto

为了限制一个元素的高度并允许用户在其中滚动,添加 overflow: scroll-y。在 macOS 下的 Chrome 中,这看起来不错,但是在 Windows 下的 Chrome 中,滚动条始终存在(即使内容很短)。这是因为 scroll-y 会无视内容,一直显示滚动条。而 overflow: auto 只在需要的时候才会显示滚动条。

左边:macOS 下的 Chrome。右边:Windows 下的 Chrome (大图预览)

.element {
    height: 300px;
    overflow-y: auto;
}

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed(@shadeed)在 Codepen 上的代码 overflow-y

3. 添加 flex-wrap

要想让一个元素表现得像弹性容器那样,只需添加 display: flex。但是,如果没有添加 flex-wrap ,那么当屏幕尺寸缩小的时候,将会出现水平滚动条。

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
.wrapper {
    display: flex;
}

.item {
    flex: 0 0 120px;
    height: 100px;
}

上面的例子在大屏幕下表现正常。在移动端下,浏览器将会出现水平滚动条。

左边:出现水平滚动条,并且项目没有换行。右边:项目换行,呈两行显示 (大图预览)

解决方法很简单。wrapper 应该在空间不足时让项目换行。

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed(@shadeed)在 Codepen 上的代码 overflow-y

4. 当弹性项目数量不定时,不要使用 justify-content: space-between

对一个弹性容器应用 justify-content: space-between 时,它会为元素分配空间,使它们互相之间的距离相等。我们的例子中有 8 个卡片项目,看起来没什么问题。如果由于某种原因,项目的数量是 7 呢?第二行的元素看起来将会与第一行的不同。

包含 8 个项目的 wrapper (大图预览)

包含 7 个项目的 wrapper(大图预览)

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed(@shadeed)在 Codepen 上的代码 overflow-y

在这种情况下,使用 CSS 网格将会更加合适。

5. 长词和链接

在手机屏幕上浏览文章的时候,一个长词或者内联链接可能会导致页面出现水平滚动条。使用 CSS 的 word-break 可以防止这个问题。

(大图预览)

.article-content p {
    word-break: break-all;
}   

(大图预览)

详情查看 CSS-Tricks

6. 透明渐变

当使用透明起点和终点添加渐变的时候,在 Safari 下会呈现一片漆黑。这是因为 Safari 无法识别关键字 transparent。通过使用 rgba(0, 0, 0, 0) 来替代它,我们可以达到预期的效果。注意下面的截图:

顶部: Chrome 70。底部:Safari 12 (大图预览)

.section-hero {
    background: linear-gradient(transparent, #d7e0ef), #527ee0;
    /* 其它样式 */
}

应该替换为:

.section-hero {
    background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0;
    /* 其它样式 */
}

7. CSS 网格布局中关于 auto-fitauto-fill 差异的误解

在 CSS 网格布局中,repeat 函数可以在不使用媒体查询的情况下创建响应式列布局。为此,可以使用 auto-fill 或者 auto-fit

.wrapper {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

(大图预览)

简而言之,auto-fill 将会在不扩展列宽度的情况下对它们进行排列,而auto-fit 则会在存在空列的时候使其宽度塌陷为 0。Sara Soueidan 写了一篇不错的文章讨论过这个问题。

8. 当视窗高度不足时将元素固定在屏幕顶部

如果你在视窗不够高的时候将一个元素固定在屏幕顶部,会发生什么事呢?很简单:它将占用屏幕空间,最终导致可供用户浏览网站的垂直区域变得很小、很不舒服,影响他们的体验。

@media (min-height: 500px) {
    .site-header {
        position: sticky;
        top: 0;
        /* 其它样式 */
    }
}

上面的代码中,我们让浏览器只在视窗高度等于或大于 500 像素的时候才固定顶部。

还有一点很重要:使用 position: sticky 的时候,除非指定 top 属性,否则它不会生效。

(大图预览)

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed(@shadeed)在 Codepen 上的代码 overflow-y

9. 为图片设置 max-width

添加图片时,定义 max-width: 100%,这样图片会在屏幕较小的时候改变大小。否则浏览器将会显示水平滚动条。

img {
    max-width: 100%;
}

10. 使用 CSS 网格定义 mainaside 元素

CSS 网格可用于定义布局中的 main 部分和 aside 部分,这是 CSS 网格的绝佳用途。问题是,即使 aside 是空的,它的高度也会和 main 的高度相等。

要修复这个问题,可以让 aside 元素与其父元素的起点对齐,这样它的高度就不会扩展了。

.wrapper {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 20px;
}

// align-self 将会让 aside 元素与其父元素的起点对齐。
aside {
    grid-column: 1 / 4;
    grid-row: 1;
    align-self: start;
}

main {
    grid-column: 4 / 13;
}

(大图预览)

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed(@shadeed)在 Codepen 上的代码 overflow-y

11. 给一个 SVG 添加 fill

使用 SVG 时,如果在 SVG 内部添加 fill,有时候它可能不会如预期的那样生效。要修复这个问题,要么移除 SVG 自身的 fill 属性,要么覆盖 fill: color

举个例子:

.some-icon {
    fill: #137cbf;
}    

如果 SVG 有一个内联 fill 的话,这段代码将不会生效。应该替换为:

.some-icon path {
    fill: #137cbf;
}

12. 使用伪元素

无论何时,我都很喜欢使用伪元素。伪元素为我们提供了一种创建假元素的方法,主要用来装饰,同时又无需将其添加到 HTML 中。

使用它们的时候,开发者可能会忘记做下面的事情:

  • 添加 content: "" 属性,
  • 在没有定义 display 属性的情况下设置它们的 widthheight

下面的例子中,我们有一个标题,其标记是一个伪元素。必须给元素添加 content: "" 属性,同时还要为它设置 display: inline-block ,以使 widthheight 像预期的那样生效。

(大图预览)

13. 使用 display: inline-block 时奇怪的空隙

给两个或两个以上的元素设置 display: inline-block 或者 display: inline ,将会导致它们之间产生一个微小的空隙。原因是浏览器会将元素当作字词去解释,从而给每个元素之间添加一个字符的空隙。

下面的例子中,每个项目的右侧都有一个 8px 的空隙,但是使用 display: inline-block 而产生的小空隙将会使其变为 12px,这不是我们想要的效果。

li:not(:last-child) {
    margin-right: 8px;
}

(大图预览)

通过给父元素设置 font-size: 0 可以简单地解决这个问题。

ul {
    font-size: 0;
}

li {
    font-size: 16px; /* 应该在这里重新设置字体大小,因为它会从父元素继承 `font-size: 0`。*/
}


(大图预览)

https://codepen.io/shadeed/pe...

查看 Ahmad Shadeed(@shadeed)在 Codepen 上的代码 overflow-y

14. 分配一个标签元素给一个输入框时,添加 for="ID"

使用表单元素时,确保所有的 label 元素都分配到了一个 ID。这将提高它们的可访问性,点击的时候,相关的输入框将获得焦点。

<label for="emailAddress">Email address:</label>
<input type="email" id="emailAddress">

(大图预览)

15. 交互式 HTML 元素的字体不生效

给整个文档设置字体的时候,字体并不会应用于诸如 inputbuttonselecttextarea 这些元素上。默认情况下,它们并不会继承文档字体,因为浏览器给它们应用了系统字体。

要修复这个问题,直接设置字体属性:

input, button, select, textarea {
    font-family: your-awesome-font-name;
}

16. 水平滚动条

有些元素的宽度可能会导致出现一个水平滚动条。

要找到问题的根源,最简单的方法就是使用 CSS outline。Addy Osmani 写了一个方便的脚本 。将其添加到浏览器的控制台,页面上所有元素的轮廓都会显示出来。

[].forEach.call($$("*"), function(a) {
    a.style.outline =
    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

(大图预览)

17. 压缩或拉伸图片

用 CSS 调整一张图片的大小时,如果纵横比与图片的宽高不一致,则图片会被压缩或拉伸。

解决方法很简单:使用 CSS 的 object-fit。它的功能和给背景图片设置 background-size: cover 类似。

img {
    object-fit: cover;
}


(大图预览)

object-fit 并非百试百灵。一些图片必须在不裁剪或者不调整大小的情况下显示,并且某些平台会强制用户以特定的尺寸裁剪或上传图片。例如,Dribbble 规定上传的缩略图尺寸为 800 x 600 像素。

18. 为 input 添加正确的 type

input 使用正确的 type。这将改善移动端的用户体验,并使用户更容易访问。

这是部分 HTML:

<form action="">
    <p>
        <label for="name">Full name</label>
        <input type="text" id="name">
    </p>
    <p>
        <label for="email">Email</label>
        <input type="email" id="email">
    </p>
    <p>
        <label for="phone">Phone</label>
        <input type="tel" id="phone">
    </p>
</form>

每个输入框分别获取焦点时,看起来是这样的:


(大图预览)

19. RTL 布局中的手机号码

在一个从右到左的布局中添加诸如 + 972-123555777 的手机号码时,加号将会位于号码末尾。要修复这个问题,可以重新指定手机号码的方向。

p {
    direction: ltr;
}

(大图预览)

结论

这里提到的所有问题都是我在前端开发工作中最常遇到的。我的目标是在开发 web 项目时定期检查这份清单。

你在 CSS 中有没有经常遇到什么问题呢?欢迎在评论区分享!

查看原文

赞 135 收藏 107 评论 4

chokcoco 发布了文章 · 2019-03-28

CSS 火焰?不在话下

正文从下面开始。


今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。

嗯,长什么样子?在 CodePen 上输入关键字 CSS Fire,能找到这样的:

image

或者这样的:

css-fire1 gif

我们希望,仅仅使用 CSS ,效果能再更进一步吗?能不能是这样子:

css-fire2 gif

如何实现

嗯,我们需要使用 filter + mix-blend-mode 的组合来完成。

很多 CSS 华而不实的效果都是 filter + mix-blend-mode,很有意思,但是业务中根本用不上,当然多了解了解总没坏处。

如上图,整个蜡烛的骨架, 除去火焰的部分很简单,掠过不讲。主要来看看火焰这一块如何生成,并且如何赋予动画效果。

Step 1: filter blur && filter contrast

模糊滤镜叠加对比度滤镜产生的融合效果。

单独将两个滤镜拿出来,它们的作用分别是:

  1. filter: blur(): 给图像设置高斯模糊效果。
  2. filter: contrast(): 调整图像的对比度。

但是,当他们“合体”的时候,产生了奇妙的融合现象。

先来看一个简单的例子:

filtermix

仔细看两圆相交的过程,在边与边接触的时候,会产生一种边界融合的效果,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。

利用上述 filter blur & filter contrast,我们要先生成一个类似火焰形状的三角形。(略去过程)

这里类似火焰形状的三角形的具体实现过程,在这篇文章有详细的讲解:你所不知道的 CSS 滤镜技巧与细节

image

父元素添加 filter: blur(5px) contrast(20),会变成这样:

image

Step 2: 火焰粒子动画

看着已经有点样子了,接下来是火焰动画,我们先去掉父元素的 filter: blur(5px) contrast(20) ,然后继续 。

这里也是利用了 filter 的融合效果,我们在上述火焰中,利用 SASS 随机均匀分布大量大小不一的圆形棕色 div ,隐匿在火焰三角内部,大概是这样:

image

接下来,我们再利用 SASS,给中间每个小圆赋予一个从下往上逐渐消失的动画,并且均匀赋予不同的 animation-delay,看起来会是这样:

css-fire3 gif

OK,最重要的一步,我们再把父元素的 filter: blur(5px) contrast(20) 打开,神奇的火焰效果就出来了:

css-fire4 gif

Step 3: mix-blend-mode 润色

当然,上述效果已经很不错了。经过各种尝试,调整参数,最后我发现加上 mix-blend-mode: screen 混合模式,效果更好,得到头图上面的最终效果如下:

css-fire2 gif

完整源码在我的 CodePen 上:CodePen Demo -- CSS Fire

另外一些效果

当然,掌握了这种方法后,这种生成火焰的技巧也可以迁移到其他效果去。下图是我鼓捣到另外一个小 Demo,当 hover 到元素的时候,产生火焰效果:

css-fire5 gif

CodePen Demo -- Hover Fire

嗯,这些其实都是对滤镜及混合模式的一些搭配运用。按照惯例,肯定有人会留言喷了,整这些花里胡哨的有什么用,性能又不好,业务中敢上不把你的腿给打骨折。

R3%2SUAVCIM7S5`J~F{6R4R

于我而言,虚心接受各种批评质疑及各种不同的观点,当然我是觉得搞技术一方面是实用,另一方面是兴趣使然,自娱自乐。希望喷子绕道~

回到正题,了解了这种黏糊糊湿答答的技巧后,还可以折腾出其他很多有意思的效果,当然可能需要更多的去尝试,如下面使用一个标签实现的滴水效果:

css-fire6 gif

CodePen Demo -- 单标签实现滴水效果

值得注意的细节点

动画虽然美好,但是具体使用的过程中,仍然有一些需要注意的地方:

  1. CSS 滤镜可以给同个元素同时定义多个,例如 filter: blur(5px) contrast(150%) brightness(1.5) ,但是滤镜的先后顺序不同产生的效果也是不一样的;
也就是说,使用 filter: blur(5px) contrast(150%) brightness(1.5)filter: brightness(1.5) contrast(150%) blur(5px) 处理同一张图片,得到的效果是不一样的,原因在于滤镜的色值处理算法对图片处理的先后顺序。
  1. 滤镜动画需要大量的计算,不断的重绘页面,属于非常消耗性能的动画,使用时要注意使用场景。记得开启硬件加速及合理使用分层技术;
  2. blur() 混合 contrast() 滤镜效果,设置不同的颜色会产生不同的效果,这个颜色叠加的具体算法暂时没有找到很具体的规则细则,使用时比较好的方法是多尝试不同颜色,观察取最好的效果;
  3. 细心的读者会发现上述效果都是基于黑色底色进行的,动手尝试将底色改为白色,效果会大打折扣。

最后

本文只是简单的介绍了整个思路过程,许多 CSS 代码细节,调试过程没有展现出来。主要几个 CSS 属性默认大家已经掌握了大概,阅读后可以自行去了解补充更多细节:

  • filter
  • mix-blend-mode

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

最后,新开通的公众号求关注,形式希望是更短的篇幅,质量更高一些的技巧类文章,包括但不局限于 CSS:

image

查看原文

赞 21 收藏 12 评论 2

chokcoco 发布了文章 · 2019-03-06

不可思议的纯 CSS 实现鼠标跟随效果

直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样:

css-mouse-follow gif

通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS。

当然,本文的重点,就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。

原理

以上面的 Demo 为例子,要使用 CSS 实现鼠标跟随,最重要的一点就是:

如何实时监测到当前鼠标处于何处?

OK,其实很多 CSS 效果,都离不开 障眼法 二字。要监测到当前鼠标处于何处,我们只需要在页面上铺满元素即可:

我们使用 100 个元素,将整个页面铺满,hover 的时,展示颜色,核心 SCSS 代码如下:

<div class="g-container">
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  ... // 100个
</div>
.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.position {
    position: absolute;
    width: 10vw;
    height: 10vh;
}

@for $i from 0 through 100 { 
    
    $x: $i % 10;
    $y: ($i - $x) / 10;
    
    .position:nth-child(#{$i + 1}) {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }

    .position:nth-child(#{$i + 1}):hover {
        background: rgba(255, 155, 10, .5)
    }
}

可以得到这样的效果:

css-mouse-follow-1 gif

好的,如果把每个元素的 hover 效果去掉,那么这个时候操作页面,其实是没有任何效果的。但同时,通过 :hover 伪类,我们又是可以大概得知当前鼠标是处于页面上哪个区间的。

好继续,我们再给页面添加一个元素(圆形小球),将它绝对定位到页面中间:

<div class="g-ball"></div>
.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

最后,我们借助 ~ 兄弟元素选择器,在 hover 页面的时候(其实是 hover 一百个隐藏的 div),通过当前 hover 到的 div,去控制小球元素的位置。

@for $i from 0 through 100{ 
    
    $x: $i % 10;
    $y: ($i - $x) / 10;
    
    .position:nth-child(#{$i + 1}):hover ~ .ball {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
}

至此,一个简单的纯 CSS 实现鼠标跟随的效果就实现了,方便大家理解,看看下面这张图就明白了:

css-mouse-follow-2 gif

完整的DEMO,你可以戳这里看看:CodePen Demo -- CSS实现鼠标跟随

存在的问题

就上面的 Demo 来看,还是有很多瑕疵的,譬如

精度太差

只能控制元素运动到 div 所在空间,而不是精确的鼠标所在位置,针对这一点,我们可以通过增加隐藏的 div 的数量来优化。譬如将 100 个平铺 div 增加到 1000 个平铺 div。

运动不够丝滑

效果看起来不够丝滑,这个可能需要通过合理的缓动函数,适当的动画延时来优化。

燥起来吧

嗯。原理掌握了,下面我们来看看,使用这个技巧还能鼓捣出什么有意思的效果。

CSS鼠标跟随按钮效果

一开始,我在 CodePen 上看到了下面这个效果,使用了 SVG + CSS + JS 实现,我就想着,仅用 CSS,能不能 copy 一下:

css-mouse-follow-3gif

CodePen Demo -- Gooey mouse follow

好吧,理想很丰满,现实很骨感。仅仅使用 CSS,还是有诸多限制。

好,看看仅仅使用 CSS 的破产版模拟效果:

css-mouse-follow-4 gif

有点太太太奇怪了,可以稍微收敛点效果,通过调整颜色,滤镜强度(就是各种尝试...),得到一个稍微好一丢丢丢的类似效果:

css-mouse-follow-5 gif

Demo 戳我,CodePen Demo -- CSS鼠标跟随按钮效果

全屏鼠标跟随动画

OK,继续,下面来点更炫的。嗯,就是那种华而不实的。

如果我们控制的不止一个元素,而是多个元素。多个元素之间的动画效果再设定不同的 transition-delay ,顺序延迟运动。哇哦,想想就很激动。譬如这样:

css-mouse-follow-6 gif

CodePen Demo -- 鼠标跟随动画 PURE CSS MAGIC MIX

如果我们能更有想象力一点,那么可以再碰撞出多一点的火花:

css-mouse-follow-7 gif

这个效果是我非常喜欢的一位日本 CodePen 作者 Yusuke Nakaya 的作品,源代码: Demo -- Only CSS: Water Surface

鼠标跟随指示

当然,不一定要指示元素运动。使用 div 铺满页面捕捉元素当前位置的技巧,还可以运用在其他一些效果上,譬如指示出鼠标运动轨迹:

css-mouse-follow-8 gif

  1. 默认的铺满背景的 div 的 transition-duration: 0.5s
  2. 当 hover 到元素背景 div 的时候,改变当前 hover 到的 div 的 transition-duration: 0s,并且 hover 的时候赋予背景色,这样当前 hover 到的 div 会立即展示
  3. 当鼠标离开 div,div 的 transition-duration 变回默认状态,也就是 transition-duration: 0.5s,同时背景色消失,这样被离开的 div 的背景色将慢慢过渡到透明,造成虚影的效果

CodePen Demo -- cancle transition

最后

其实还有很多有意思的用法,感兴趣的同学可以自己动手,更多的去尝试,组合。

经常有人会问我,这些奇奇怪怪的用法实际业务中用得上吗?到底有用没用。额,我的看法是也许业务中真的用不上或者应用场景极为有限,但是多了解一些,能在遇到问题的时候多点选择,多一些思考的空间,更好的发散思维,至少是无害吧。

更多你可能想都想不到的有趣的 CSS 你可以来这里瞧瞧:

CSS-Inspiration -- CSS灵感

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

赞 129 收藏 96 评论 7

chokcoco 评论了文章 · 2019-03-05

有趣的 box-decoration-break

这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。

因为 MDN 上关于这个属性,没有中文文档,所以一直在想一个合理贴切的中文翻译。直译一下:

  • box -- 盒,可以理解为元素盒模型
  • decoration -- 装饰,理解为元素样式
  • break -- 断行,参考word-break ,理解为断行时候的表现

那么,这个属性可以先理解为,元素在发生断行时其样式的表现形式。

MDN 上英文释意为:The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages。大意是 box-decoration-break 属性规定了一个元素片段在发生折行/断行时,应该如何被渲染。

可选取值只有两个:

{
    box-decoration-break: slice;   // 默认取值
    box-decoration-break: clone;
}

换行示例

这个属性通常作用于内联元素。假设我们存在如下结构,并且给它添加一个边框:

<span>ABCDEFGHIJKLMN</span>
span {
    border: 2px solid #999;
}

嗯,效果如下,平平无奇:
image

好,接下来就是 break,我们把上面一行的文字断行,样式不变:

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>

得到如下结果:

image

O,可以看到,文字换行的同时,边框也随之变化,头尾两行都有 3 边边框,中间两行只有上下两边边框。如果将 4 行合起来,可以拼成图一,这个是正常的展示效果。

接下来,我们加上本文的主角 box-decoration-break: clone

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

生效后,我们将会得到这样的结果:

image

box-decoration-break: clone 使用小结

看到这里,我们已经可以大概理解这个属性的作用了:

使用了 box-decoration-break: clone 的内联元素,如果存在折行显示,那么每一行都将拥有原本单行的所有完整样式

再看个例子加深下理解,存在如下结构,其使用了 box-decoration-break: clone 前后两种效果:

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>

image

CodePen Demo -- box-decoration-break

box-decoration-break: clone 生效样式影响范围

当然,使用了 box-decoration-break: clone 的元素并非对每一个样式都会生效,只会作用于下列样式:

  • background
  • border
  • border-image
  • box-shadow
  • clip-path
  • margin
  • padding
  • Syntax

box-decoration-break: clone 实际应用

接下来看看,有没有什么靠谱的实际应用场景。

box-decoration-break: clone 实现文本选中效果

会有这样的场景,我们希望对一个多行文本中的特定一段文本进行着重展示。这个时候,我们可以通过 <p> 嵌套 <span> ,对 <span> 包裹的文字进行一些特定的展示。

譬如我们有这样一段文案:

<p>
The <span>box-decoration-break</span> CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> 
</p>

其中,我们将需要强调的内容通过 <span> 标签包裹起来,赋予特定样式并且加上 box-decoration-break: clone,这样,无论强调文案是否换行,每一处的强调背景都是一致的:

p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}

得到如下效果:
image

如果不加 box-decoration-break: clone 呢?那么如果存在换行,效果会大打折扣:

image

CodePen Demo -- text-decoration-break 文本选中效果

box-decoration-break 每行文字带特定边框

又会有这样的场景,我们希望每一行文案都带有特定的边框样式,像这样:
image

怎么实现呢?也许可以每一行都是一个 <p>,每一行 <p> 设定上述样式。但是如果文本内容不确定,容器的宽度也不确定呢

这种场景,使用 box-decoration-break 也非常便捷。当然这里有个小技巧,正常而言, box-decoration-break: clone 只对 inline 元素生效,如果我们的文案像是这样包裹在 <p> 标签内:

<p>
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 
</p>

要使 box-decoration-break: clone<p> 生效,可以通过设定 <p>display: inline 来实现。如此一来,要实现上述效果,我们只需要:

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

无论文本内容或者容器宽度如何变化,都能完美适配:

box-deraction-break

CodePen Demo -- box-decoration-break 每行文字带特定边框

box-decoration-break 结合过渡动画

结合上面的内容,我们还可以考虑将 box-decoration-break 与过渡效果或者动画效果结合起来。

譬如,我们希望当我们 hover 文字内容的时候,一些重点需要展示的文字段落能够被强调展示,可能是这样:

box-deraction-break-hover

CodePen Demo -- box-decoration-break 过渡动画

又或者是这样:

box-deraction-break-hover2

CodePen Demo -- box-decoration-break 结合过渡动画

你可以尝试点进 Demo ,然后去掉 box-decoration-break: clone ,会发现效果大打折扣。

兼容性

额,按照惯例兼容性应该都不太行。并且 MDN 也给出了这样的提示:

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

看看 Can I Use,其实还好,除了 IE 系列全军覆没,所以可以考虑应用在移动端。即便这个属性不兼容,降级展示对页面不会造成什么影响:
image

另外,本文中,给出的代码都是 box-decoration-break: clone ,CodePen 自带了 autoprefixer 实际中可能需要写成:

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

最后

国内看到了大漠老师和张鑫旭大大都已经写过这个属性,大家可以对比着看看,加深理解:

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

chokcoco 收藏了文章 · 2019-03-04

有趣的 box-decoration-break

这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。

因为 MDN 上关于这个属性,没有中文文档,所以一直在想一个合理贴切的中文翻译。直译一下:

  • box -- 盒,可以理解为元素盒模型
  • decoration -- 装饰,理解为元素样式
  • break -- 断行,参考word-break ,理解为断行时候的表现

那么,这个属性可以先理解为,元素在发生断行时其样式的表现形式。

MDN 上英文释意为:The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages。大意是 box-decoration-break 属性规定了一个元素片段在发生折行/断行时,应该如何被渲染。

可选取值只有两个:

{
    box-decoration-break: slice;   // 默认取值
    box-decoration-break: clone;
}

换行示例

这个属性通常作用于内联元素。假设我们存在如下结构,并且给它添加一个边框:

<span>ABCDEFGHIJKLMN</span>
span {
    border: 2px solid #999;
}

嗯,效果如下,平平无奇:
image

好,接下来就是 break,我们把上面一行的文字断行,样式不变:

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>

得到如下结果:

image

O,可以看到,文字换行的同时,边框也随之变化,头尾两行都有 3 边边框,中间两行只有上下两边边框。如果将 4 行合起来,可以拼成图一,这个是正常的展示效果。

接下来,我们加上本文的主角 box-decoration-break: clone

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

生效后,我们将会得到这样的结果:

image

box-decoration-break: clone 使用小结

看到这里,我们已经可以大概理解这个属性的作用了:

使用了 box-decoration-break: clone 的内联元素,如果存在折行显示,那么每一行都将拥有原本单行的所有完整样式

再看个例子加深下理解,存在如下结构,其使用了 box-decoration-break: clone 前后两种效果:

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>

image

CodePen Demo -- box-decoration-break

box-decoration-break: clone 生效样式影响范围

当然,使用了 box-decoration-break: clone 的元素并非对每一个样式都会生效,只会作用于下列样式:

  • background
  • border
  • border-image
  • box-shadow
  • clip-path
  • margin
  • padding
  • Syntax

box-decoration-break: clone 实际应用

接下来看看,有没有什么靠谱的实际应用场景。

box-decoration-break: clone 实现文本选中效果

会有这样的场景,我们希望对一个多行文本中的特定一段文本进行着重展示。这个时候,我们可以通过 <p> 嵌套 <span> ,对 <span> 包裹的文字进行一些特定的展示。

譬如我们有这样一段文案:

<p>
The <span>box-decoration-break</span> CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> 
</p>

其中,我们将需要强调的内容通过 <span> 标签包裹起来,赋予特定样式并且加上 box-decoration-break: clone,这样,无论强调文案是否换行,每一处的强调背景都是一致的:

p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}

得到如下效果:
image

如果不加 box-decoration-break: clone 呢?那么如果存在换行,效果会大打折扣:

image

CodePen Demo -- text-decoration-break 文本选中效果

box-decoration-break 每行文字带特定边框

又会有这样的场景,我们希望每一行文案都带有特定的边框样式,像这样:
image

怎么实现呢?也许可以每一行都是一个 <p>,每一行 <p> 设定上述样式。但是如果文本内容不确定,容器的宽度也不确定呢

这种场景,使用 box-decoration-break 也非常便捷。当然这里有个小技巧,正常而言, box-decoration-break: clone 只对 inline 元素生效,如果我们的文案像是这样包裹在 <p> 标签内:

<p>
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 
</p>

要使 box-decoration-break: clone<p> 生效,可以通过设定 <p>display: inline 来实现。如此一来,要实现上述效果,我们只需要:

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

无论文本内容或者容器宽度如何变化,都能完美适配:

box-deraction-break

CodePen Demo -- box-decoration-break 每行文字带特定边框

box-decoration-break 结合过渡动画

结合上面的内容,我们还可以考虑将 box-decoration-break 与过渡效果或者动画效果结合起来。

譬如,我们希望当我们 hover 文字内容的时候,一些重点需要展示的文字段落能够被强调展示,可能是这样:

box-deraction-break-hover

CodePen Demo -- box-decoration-break 过渡动画

又或者是这样:

box-deraction-break-hover2

CodePen Demo -- box-decoration-break 结合过渡动画

你可以尝试点进 Demo ,然后去掉 box-decoration-break: clone ,会发现效果大打折扣。

兼容性

额,按照惯例兼容性应该都不太行。并且 MDN 也给出了这样的提示:

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

看看 Can I Use,其实还好,除了 IE 系列全军覆没,所以可以考虑应用在移动端。即便这个属性不兼容,降级展示对页面不会造成什么影响:
image

另外,本文中,给出的代码都是 box-decoration-break: clone ,CodePen 自带了 autoprefixer 实际中可能需要写成:

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

最后

国内看到了大漠老师和张鑫旭大大都已经写过这个属性,大家可以对比着看看,加深理解:

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

chokcoco 发布了文章 · 2019-03-04

有趣的 box-decoration-break

这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。

因为 MDN 上关于这个属性,没有中文文档,所以一直在想一个合理贴切的中文翻译。直译一下:

  • box -- 盒,可以理解为元素盒模型
  • decoration -- 装饰,理解为元素样式
  • break -- 断行,参考word-break ,理解为断行时候的表现

那么,这个属性可以先理解为,元素在发生断行时其样式的表现形式。

MDN 上英文释意为:The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages。大意是 box-decoration-break 属性规定了一个元素片段在发生折行/断行时,应该如何被渲染。

可选取值只有两个:

{
    box-decoration-break: slice;   // 默认取值
    box-decoration-break: clone;
}

换行示例

这个属性通常作用于内联元素。假设我们存在如下结构,并且给它添加一个边框:

<span>ABCDEFGHIJKLMN</span>
span {
    border: 2px solid #999;
}

嗯,效果如下,平平无奇:
image

好,接下来就是 break,我们把上面一行的文字断行,样式不变:

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>

得到如下结果:

image

O,可以看到,文字换行的同时,边框也随之变化,头尾两行都有 3 边边框,中间两行只有上下两边边框。如果将 4 行合起来,可以拼成图一,这个是正常的展示效果。

接下来,我们加上本文的主角 box-decoration-break: clone

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

生效后,我们将会得到这样的结果:

image

box-decoration-break: clone 使用小结

看到这里,我们已经可以大概理解这个属性的作用了:

使用了 box-decoration-break: clone 的内联元素,如果存在折行显示,那么每一行都将拥有原本单行的所有完整样式

再看个例子加深下理解,存在如下结构,其使用了 box-decoration-break: clone 前后两种效果:

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>

image

CodePen Demo -- box-decoration-break

box-decoration-break: clone 生效样式影响范围

当然,使用了 box-decoration-break: clone 的元素并非对每一个样式都会生效,只会作用于下列样式:

  • background
  • border
  • border-image
  • box-shadow
  • clip-path
  • margin
  • padding
  • Syntax

box-decoration-break: clone 实际应用

接下来看看,有没有什么靠谱的实际应用场景。

box-decoration-break: clone 实现文本选中效果

会有这样的场景,我们希望对一个多行文本中的特定一段文本进行着重展示。这个时候,我们可以通过 <p> 嵌套 <span> ,对 <span> 包裹的文字进行一些特定的展示。

譬如我们有这样一段文案:

<p>
The <span>box-decoration-break</span> CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> 
</p>

其中,我们将需要强调的内容通过 <span> 标签包裹起来,赋予特定样式并且加上 box-decoration-break: clone,这样,无论强调文案是否换行,每一处的强调背景都是一致的:

p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}

得到如下效果:
image

如果不加 box-decoration-break: clone 呢?那么如果存在换行,效果会大打折扣:

image

CodePen Demo -- text-decoration-break 文本选中效果

box-decoration-break 每行文字带特定边框

又会有这样的场景,我们希望每一行文案都带有特定的边框样式,像这样:
image

怎么实现呢?也许可以每一行都是一个 <p>,每一行 <p> 设定上述样式。但是如果文本内容不确定,容器的宽度也不确定呢

这种场景,使用 box-decoration-break 也非常便捷。当然这里有个小技巧,正常而言, box-decoration-break: clone 只对 inline 元素生效,如果我们的文案像是这样包裹在 <p> 标签内:

<p>
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 
</p>

要使 box-decoration-break: clone<p> 生效,可以通过设定 <p>display: inline 来实现。如此一来,要实现上述效果,我们只需要:

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

无论文本内容或者容器宽度如何变化,都能完美适配:

box-deraction-break

CodePen Demo -- box-decoration-break 每行文字带特定边框

box-decoration-break 结合过渡动画

结合上面的内容,我们还可以考虑将 box-decoration-break 与过渡效果或者动画效果结合起来。

譬如,我们希望当我们 hover 文字内容的时候,一些重点需要展示的文字段落能够被强调展示,可能是这样:

box-deraction-break-hover

CodePen Demo -- box-decoration-break 过渡动画

又或者是这样:

box-deraction-break-hover2

CodePen Demo -- box-decoration-break 结合过渡动画

你可以尝试点进 Demo ,然后去掉 box-decoration-break: clone ,会发现效果大打折扣。

兼容性

额,按照惯例兼容性应该都不太行。并且 MDN 也给出了这样的提示:

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

看看 Can I Use,其实还好,除了 IE 系列全军覆没,所以可以考虑应用在移动端。即便这个属性不兼容,降级展示对页面不会造成什么影响:
image

另外,本文中,给出的代码都是 box-decoration-break: clone ,CodePen 自带了 autoprefixer 实际中可能需要写成:

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

最后

国内看到了大漠老师和张鑫旭大大都已经写过这个属性,大家可以对比着看看,加深理解:

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

赞 12 收藏 8 评论 5

chokcoco 发布了文章 · 2019-01-09

不可思议的纯 CSS 滚动进度条效果

问题先行,如何使用 CSS 实现下述滚动条效果?

scrollbar

就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。

在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。

OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?

image

分析需求

第一眼看到这个效果,感觉这个跟随滚动动画,仅靠 CSS 是不可能完成的,因为这里涉及了页面滚动距离的计算。

如果想只用 CSS 实现,只能另辟蹊径,使用一些讨巧的方法。

好,下面就借助一些奇技淫巧,使用 CSS 一步一步完成这个效果。分析一下难点:

  • 如何得知用户当前滚动页面的距离并且通知顶部进度条?

正常分析应该是这样的,但是这就陷入了传统的思维。进度条就只是进度条,接收页面滚动距离,改变宽度。如果页面滚动和进度条是一个整体呢?

实现需求

不卖关子了,下面我们运用线性渐变来实现这个功能。

假设我们的页面被包裹在 <body> 中,可以滚动的是整个 body,给它添加这样一个从左下到到右上角的线性渐变:

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

那么,我们可以得到一个这样的效果:

scrollbar2

Wow,黄色块的颜色变化其实已经很能表达整体的进度了。其实到这里,聪明的同学应该已经知道下面该怎么做了。

我们运用一个伪元素,把多出来的部分遮住:

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

为了方便演示,我把上面白色底改成了黑色透明底,:

scrollbar3

实际效果达成了这样:

scrollbar4

眼尖的同学可能会发现,这样之后,滑到底的时候,进度条并没有到底:

image

究其原因,是因为 body 的线性渐变高度设置了整个 body 的大小,我们调整一下渐变的高度:

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}

这里使用了 calc 进行了运算,减去了 100vh,也就是减去一个屏幕的高度,这样渐变刚好在滑动到底部的时候与右上角贴合。

+ 5px 则是滚动进度条的高度,预留出 5px 的高度。再看看效果,完美:

scrollbar

至此,这个需求就完美实现拉,算是一个不错的小技巧,完整的 Demo:

CodePen Demo -- 使用线性渐变实现滚动进度条

image

别人写过的东西通常我都不会再写,这个技巧很早以前就有看到,中午在业务中刚好用到这个技巧就写下了本文,没有去考证最先发明这个技巧的是谁。不知道已经有过类似的文章,所以各位也可以看看下面这篇:

W3C -- 纯CSS实现Scroll Indicator(滚动指示器)

最后

其实这只是非常牛逼的渐变非常小的一个技巧。更多你想都想不到的有趣的 CSS 你可以来这里瞧瞧:

CSS-Inspiration -- CSS灵感

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

赞 132 收藏 96 评论 7

chokcoco 发布了文章 · 2018-12-18

探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性:

{
    transform-style: preserve-3d;
    perspective: 1000;
    transform: translate3d();
}

这个 Demo 你可以戳这里,大概是这样:CodePen Demo - 3D ball:

3dball

嗯,大概到了这个效果,想到了 CSS 混合模式mix-blend-mode,寻思着,利用混合模式,是否能让效果更上一层楼或者碰撞出一些其他火花。

mix-blend-mode:我们通常称之为混合模式,利用混合模式将多个图层混合可以得到一个新的效果,mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

关于混合模式的一些使用可以看这里:不可思议的混合模式 background-blend-mode (二)不可思议的混合模式 background-blend-mode

CSS 3D 配合 mix-blend-mode

然而,给元素加上了一个混合模式之后,神奇的事情发生了,3D 效果消失了。

也就是在每个光点的 CSS 元素代码中添加这样一句:

{
    mix-blend-mode: lighten;
}

3dball2

效果从 CSS 3D 变成了 2D

qq 20181217194534

这就很蹊跷了,预想中的混合并没有发生,取而代之的是 3D 的失效。我想,也许与内核有关,上面的效果是在 chrome 65.0.3325.181 试验得到的。

是否与浏览器内核有关?

带着这样的疑问,我又测试了下其他几个内核:

  • firefox 64.0 -- 这次更加诡异,整个图案都不会再被渲染出来
  • Safari 12.0.2 -- 渲染正常

Safari 是可以正常展示的,只能初略的认为,应该是与内核有关系的。那应该也有很多人遇到过同样的问题,带着这个疑惑,google 一下。

爆栈网也有同学提出类似的疑惑:StackOverflow -- mix-blend-mode is broken by 3D transformations on page

image

随后,在 chromium bug 提交网站上,找到了 15 年的一个 bug 单,也是对这个问题的疑问:

BUG -CSS mix-blend-mode turns off CSS perspective.

最终在 bug 单的最下面找到了可能靠谱的回答:

When we have mix-blend-mode, the closest ancestor that creates stacking context will isolate blending. We create a render surface at the root of this isolated group and because render surfaces don't support preserve-3d(because they render into separate FBO), we see a flattened result.

ajuma@ suggested that this bug maybe much easier to fix after Slimming paint v2 if we can somehow disentangle transforms from layers.

翻译一下,意思大概是:当我们使用 CSS 混合模式的时候,堆叠上下文会重新对这个使用了混合模式的元素的根节点处创建一个独立的渲染平面,但是很可惜,这个渲染平面是不支持 preserve-3d 的(因为它们渲染到单独的FBO中),所以我们看到是一个 2D 的平面效果。

验证 Layer borders

上面的那句话应该已经可以作为结论,我再使用 chrome 提供的工具验证一下,打开开发者工具的 Rendering -> Layer borders:

image

黄色代表 CSS 渲染时候的 GraphicsLayer 层, 蓝色网格表示瓦片(tile),你可以把它们当作是层的单元(并不是层),Chrome 内核可以将它们作为一个大层的部分上传给 GPU 进行渲染加速。

  • 正常 3D 模式下,开启 Layer borders 效果:

balllayer

  • 添加了 mix-blend-mode 的 3D 模式下,开启 Layer borders 效果:

balllayer2

可以看到,在 mix-blend-mode 的 3D 模式下,确实在整个球形元素之外,又多了一层蓝色 tile。也就是上文提到的独立的渲染平面,也就是因为这个渲染平面不支持 preserve-3d 的原因,我们最终得到了一个 2D 平面图形。

滤镜也会导致 CSS 3D 失效

完了吗?没有。不是吧,这谁顶得住啊。

qq 20181218111248

那么如果是因为 mix-blend-mode 多生成了一个独立渲染平面导致的 3D 失效,那么是否有其他元素也会导致同样的结果呢?

带着疑惑,去掉了 mix-blend-mode,我又给设置了 3d 的元素添加了一个滤镜:

{
-    mix-blend-mode: lighten;
+    filter: blur(1px);
}

果然,出现了同样的问题,3D 失效:

balllayer3

总结一下

嗯。那么应该可以初步得到一个结论就是所有这些在渲染时候需要再独立生成一个渲染平面,且包含了 preserve-3d 的属性,都会导致内部的 CSS 3D 失效

暂时我发现的有下述几个属性,都会导致 CSS 3D 失效:

  • mix-blend-mode
  • background-blend-mode
  • filter

其他问题

这个 bug 有什么影响

额,通常来说,很少会有人在使用 CSS 3D 的同时使用混合模式或者滤镜,这两个属性更多的锦上添花的作用,所以大部分时候,不使用它们就不会有问题, 所以影响不是很大。

上文中的 FBO 是什么?

上文的 FBO 准确而言是什么我也无法 100% 确定,推测应该是 Frame Buffer Object,帧缓存对象,存在于显存中。帧缓存是一些二维数组和 OpenGL 所使用的存储区的集合:颜色缓存、深度缓存、模板缓存和累计缓存。

各种三维场景现在渲染到屏幕上都是先放到一个 FBO 中,可以理解为一张离屛图片,用于加速渲染。

Bug 何时会被修复

在 chromium bugs 网站,上述 bug 被合并到 issue 575099,并且最终状态是 Untriaged,表示尚未分配优先级,意思是等待某人确定哪个人应该认领并修复该特定错误。所以,短期内可能无望解决。

最后

感谢耐心读完。更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

赞 20 收藏 11 评论 0

chokcoco 关注了用户 · 2018-12-10

刘羽冲 @liuyuchong

破庙中神易,破心中神难。 当人类第一次仰望天空的时候,就已经有罪!

关注 290

chokcoco 回答了问题 · 2018-11-27

css 左边元素和右边元素一样高,垂直居中如何实现呢?

这个可以归类为多列等高问题。在你这里其实要实现两列等高,并不一定是高度的完全一致,只是左右两列颜色所占空间高度看上去一致。
你上面给出的解法算是一种,还有其他一些巧妙的解法,可以戳这个DEMO看看:

6种实现多列等高的方法


另外,更多有趣的 CSS 问题解法可以戳这里看看:https://github.com/chokcoco/C...

关注 7 回答 6

chokcoco 关注了用户 · 2018-11-08

keke @keke233

好好学习,天天向上~

关注 8402

chokcoco 收藏了文章 · 2018-11-08

SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

clipboard.png

CSS 的全称是 Cascading Style Sheets,即层叠样式表, 是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、XHTML 之类的 XML 分支语言)元素所呈现的样式。

“层叠”即表示允许以多种方式来描述样式,一个 HTML 元素可以被渲染呈现出多种样式。

下面就让我们来看看 CSS 可以有多神奇吧。

CSS 基础特性

在开始之前,我们先来了解一下 CSS 的历史。

CSS简史(译)

html和css是那么密不可分,以至于你可能会觉得它们是一起出现的。实际上,自1989年Tim Berners Lie发明互联网后的多年中,这个世界上都不存在一个名为css的事物,web的原始版本根本就没有提供一种装饰网页的方法。

你不知道的CSS

这篇文章整理了一些实用的CSS技巧,来解决我们在实际项目开发中遇到的的问题。每个技巧将结合demo或者图示来说明。也许你此刻正在发愁的一个bug可以在这里找到答案?。

图片描述

css三角形绘制方法总结

在做UI(页面重构)的时候,免不了和各种小图标打交道,这其中最多的应该是三角形以及箭头,一般情况下可以通过伪类使用unicode解决大部分问题。

现在我们来总结下几种使用css绘制三角形的方法。

图片描述

奇妙的 CSS shapes(CSS图形)

CSS 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能:

  • clip-path
  • shape-outside

图片描述

不可思议的CSS之clip-path

图片描述

聊聊clip-path

图片描述

CSS技巧(一):背景与边框

图片描述

css filter滤镜的实例讲解

clipboard.png

动起来

CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三个特效,希望这三个特殊能让大家受到启发,利用css3做出更好,更炫的动画效果,并且对比这三个特效和JS特效的对比,希望能帮助到是大家学到CSS3的一些知识。

图片描述

CSS3 过渡

CSS 过渡( transition )用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化。这个过程可以自定义。

图片描述

如何只用 CSS 完成漂亮的加载

只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载

图片描述

纯 CSS 实现波浪效果!

原理十分简单,我们都知道,一个正方形,给它添加 border-radius: 50%,将会得到一个圆形。

我们让上面这个图形滚动起来(rotate)

图片描述

【小程序可用】CSS3 animation 实现的跑马灯

微信小程序现在实际上还是用的webview,里面搞动画效率最高的莫过于使用CSS3的animation了。

图片描述

CSS 黑科技

新手玩CSS中的一些黑科技

  1. 鼠标移进网页里,不见了
  2. 简单的文字模糊效果
  3. 多重边框
  4. 实时编辑CSS
  5. CSS中简单运算
  6. border-radius
  7. outline-offset
  8. 最后献上一同事实习前的大白demo

黑科技:CSS定制多行省略

当字数多到一定程度就显示省略号点点点。最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。

图片描述

CSS五种方式实现Footer置底

页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。

当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

clipboard.png

纯CSS实现网站常用的五角星评分和分数展示交互效果

最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方式完成评分和展示分数的功能,没有js,也就意味着没判断逻辑,代码出错的几率更少,也更便于维护,在此,把这个功能的实现的过程记录和分享一下,一起学习交流。

图片描述

CSS标题线(删除线贯穿线效果)实现之一二

所以这个问题是:因屏幕的伸展收缩会导致内容区所能容纳的内容不一,从而导致高度不一,各个元素也是随着屏幕时高时底,背景色的用法无法生效,有何好的解决办法?

图片描述

使用 CSS overscroll-behavior 控制滚动行为:自定义下拉刷新和溢出效果

CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为,一般用在滚动到顶部或者底部。

CSS3实现音量控制动画

图片描述

css实现边框动画效果

图片描述

简单说 用CSS做一个魔方旋转的效果

图片描述

用css3做一个求婚小动画

图片描述

巧妙使用transform实现环形路径平移动画

图片描述

手把手教你打造一个纯CSS图标库

clipboard.png

CSS3 巧妙实现聊天气泡

clipboard.png

带你玩转css3的3D!

图片描述

一个纯CSS3实现的酷炫翻书效果

clipboard.png

纯css无缝滚动

clipboard.png

来画画吧

[译]我是如何开始制作CSS图片的

clipboard.png

【二次元的CSS】—— 用 DIV + CSS3 画大白(详解步骤)

clipboard.png

【二次元的CSS】—— 用 DIV + CSS3 画Hello Kitty(详解步骤)

clipboard.png

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

clipboard.png

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

clipboard.png

【二次元的CSS】—— 用 DIV + CSS3 画小丸子和爷爷

clipboard.png

本期完
:)


欢迎关注 SegmentFault 微信公众号 :)

clipboard.png

查看原文

chokcoco 赞了文章 · 2018-11-08

SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

clipboard.png

CSS 的全称是 Cascading Style Sheets,即层叠样式表, 是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、XHTML 之类的 XML 分支语言)元素所呈现的样式。

“层叠”即表示允许以多种方式来描述样式,一个 HTML 元素可以被渲染呈现出多种样式。

下面就让我们来看看 CSS 可以有多神奇吧。

CSS 基础特性

在开始之前,我们先来了解一下 CSS 的历史。

CSS简史(译)

html和css是那么密不可分,以至于你可能会觉得它们是一起出现的。实际上,自1989年Tim Berners Lie发明互联网后的多年中,这个世界上都不存在一个名为css的事物,web的原始版本根本就没有提供一种装饰网页的方法。

你不知道的CSS

这篇文章整理了一些实用的CSS技巧,来解决我们在实际项目开发中遇到的的问题。每个技巧将结合demo或者图示来说明。也许你此刻正在发愁的一个bug可以在这里找到答案?。

图片描述

css三角形绘制方法总结

在做UI(页面重构)的时候,免不了和各种小图标打交道,这其中最多的应该是三角形以及箭头,一般情况下可以通过伪类使用unicode解决大部分问题。

现在我们来总结下几种使用css绘制三角形的方法。

图片描述

奇妙的 CSS shapes(CSS图形)

CSS 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能:

  • clip-path
  • shape-outside

图片描述

不可思议的CSS之clip-path

图片描述

聊聊clip-path

图片描述

CSS技巧(一):背景与边框

图片描述

css filter滤镜的实例讲解

clipboard.png

动起来

CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三个特效,希望这三个特殊能让大家受到启发,利用css3做出更好,更炫的动画效果,并且对比这三个特效和JS特效的对比,希望能帮助到是大家学到CSS3的一些知识。

图片描述

CSS3 过渡

CSS 过渡( transition )用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化。这个过程可以自定义。

图片描述

如何只用 CSS 完成漂亮的加载

只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载

图片描述

纯 CSS 实现波浪效果!

原理十分简单,我们都知道,一个正方形,给它添加 border-radius: 50%,将会得到一个圆形。

我们让上面这个图形滚动起来(rotate)

图片描述

【小程序可用】CSS3 animation 实现的跑马灯

微信小程序现在实际上还是用的webview,里面搞动画效率最高的莫过于使用CSS3的animation了。

图片描述

CSS 黑科技

新手玩CSS中的一些黑科技

  1. 鼠标移进网页里,不见了
  2. 简单的文字模糊效果
  3. 多重边框
  4. 实时编辑CSS
  5. CSS中简单运算
  6. border-radius
  7. outline-offset
  8. 最后献上一同事实习前的大白demo

黑科技:CSS定制多行省略

当字数多到一定程度就显示省略号点点点。最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。

图片描述

CSS五种方式实现Footer置底

页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。

当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

clipboard.png

纯CSS实现网站常用的五角星评分和分数展示交互效果

最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方式完成评分和展示分数的功能,没有js,也就意味着没判断逻辑,代码出错的几率更少,也更便于维护,在此,把这个功能的实现的过程记录和分享一下,一起学习交流。

图片描述

CSS标题线(删除线贯穿线效果)实现之一二

所以这个问题是:因屏幕的伸展收缩会导致内容区所能容纳的内容不一,从而导致高度不一,各个元素也是随着屏幕时高时底,背景色的用法无法生效,有何好的解决办法?

图片描述

使用 CSS overscroll-behavior 控制滚动行为:自定义下拉刷新和溢出效果

CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为,一般用在滚动到顶部或者底部。

CSS3实现音量控制动画

图片描述

css实现边框动画效果

图片描述

简单说 用CSS做一个魔方旋转的效果

图片描述

用css3做一个求婚小动画

图片描述

巧妙使用transform实现环形路径平移动画

图片描述

手把手教你打造一个纯CSS图标库

clipboard.png

CSS3 巧妙实现聊天气泡

clipboard.png

带你玩转css3的3D!

图片描述

一个纯CSS3实现的酷炫翻书效果

clipboard.png

纯css无缝滚动

clipboard.png

来画画吧

[译]我是如何开始制作CSS图片的

clipboard.png

【二次元的CSS】—— 用 DIV + CSS3 画大白(详解步骤)

clipboard.png

【二次元的CSS】—— 用 DIV + CSS3 画Hello Kitty(详解步骤)

clipboard.png

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

clipboard.png

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

clipboard.png

【二次元的CSS】—— 用 DIV + CSS3 画小丸子和爷爷

clipboard.png

本期完
:)


欢迎关注 SegmentFault 微信公众号 :)

clipboard.png

查看原文

赞 84 收藏 445 评论 15