原文:CSS动效集锦，视觉魔法的碰撞与融合（二） - 知乎

 

引言

持久以来，我认识到。CSS，是存在极限的。正如曾经替你扛下一切的阿谁男人，也总有他眼含热泪地拼上一切，却也无法帮你做到的工作，他只能困窘地让你看到他的无能为力，怅然若掉。 然后和曾经他生长的时代，做一一辞别。

CSS有他难以做到的工作，我们帮他用lottie解决

CSS有他可以做到的工作，我们用我们的头脑帮他解决

本文实现的CSS效果一览

标题吸顶

手写箭头

文字配景

圆形天坑

按钮波涛

动态方形

加载骨架

多行省略

标题吸顶

sticky是一种和relative/fixed类似的定位方法，它可以实现这样的需求，就是一个标题栏nav，，原本以普通默认的relative定位待在原位置，然后当页面向下滚动，当标题栏将要消掉在窗口视野中时，它不单不跟从其他元素消掉在窗口视野中，而是俄然将定位方法酿成fixed，显示成一直黏在窗口顶部的效果，就算鼠标再向下滚动，它也一直黏在那里。

这个效果实现，首先要通过position:sticky;设置成粘性定位，正如上面所说，它会在特按时候从relative转换为fixed,这个特定的时机由top/bottom等属性掌控，当元素距离小于top时候，便会触发，很显然，一般我们把top设置为0

.sticky { z-index: 100; width: 500px; height: 20px; background: red; position:sticky; position: -webkit-sticky; top:0px; } <div class="sticky" style="margin:30px;"> </div>

坑点：粘性定位生效的前提是，元素距离他的父元素顶部的距离要小于top，否则粘滞效果不起感化

手写箭头

我们一般会通过icon去实现一个箭头，可如果我们设置一点点难度：设计师如果不给你箭头Icon又改怎么办呢？？我们可以这样：

先画一个div，border设置成箭头的颜色，同时呢，把div左边和下边的border变透明

再然后呢，把这个div右转45度：transform:rotate(45deg),这样就可以得到右边的箭头了

.arrow { width: 50px; height: 50px; border:10px solid blue; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); } <div class="arrow" style="margin:30px"></div>

文字配景

A：CSS文字配景怎么实现？

B：我知道我知道！text-background

A: 你的猜度非常合理！但如果我们真有这个CSS属性就好了

对，问题在于我们没有text-background这样一个CSS属性实现文字配景，但是我们有background-clip: text；它可以把background按文本进行裁剪。裁剪之后呢，配景就只剩文本下面的这一块了，然后我们要注意，文本默认是不透明的呀，所以如果想要让人看到文本后面的配景，就要通过color:transparent将文本酿成透明。

同时呢，我们有-webkit-background-clip可以出格针对webkit内核浏览器的实现，以进行兼容

body { background: #fff; } .text-bg { width: 800px; font-size: 70px; font-weight: bold; background: url(../demoImage/sea.jpg); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } <div class="text-bg" style="margin:30px"> <p class="text">我叫彭湖湾，请叫我胖湾</p> </div>

圆形天坑