能用CSS实现的就不用麻烦JavaScript（Part2）

╰半夏微凉° 2022-09-01 11:56 157阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![12ef573d83354dfec255f2d4d6405285.png][]

## 前言 ##

凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。— Atwood定律

凡是可以用CSS实现的就不用麻烦JavaScript。— 笔者定律

具体看同学们自己的使用习惯。不过用好CSS，还是可以提高不少开发效率，至少代替很多JavaScript场景，减少JavaScript代码。

上一篇文章[能用CSS实现的就不用麻烦JavaScript][CSS_JavaScript]提到好几种常用场景，这次笔者再分享多几个用CSS代替JavaScript的场景。希望大家能在日常开发中使用到。

## 拾色器 ##

拾色器是JavaScript高频使用场景，如果自己开发一个也是非常复杂的，找第三方插件用也要一定的学习成本。`input`标签的`type`字段提供了`Color`类型，它让我们很容易去使用拾色器，另外这个拾色器还可以吸取整个电脑桌面的颜色。

![8ba749a9faf4d75e461433921975b9fa.gif][] 屏幕录制2021-07-19 上午11.12.39.gif

<input type="color" value="#0000ff">
    复制代码

img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    input { 
        padding: 0;
        border: none; 
        position: absolute;
        width: 100%; 
        height: 100%;
        mix-blend-mode: hue; //色相模式
        cursor: pointer;
    }
    复制代码

这里说一下 CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合模式。`mix-blend-mode` 用于多个不同标签间的混合模式，其中这次用到调整车身颜色的`hue`代表色相模式，熟悉PS的同学，是很容易理解。`mix-blend-mode` 还有其他模式，有兴趣的同学可以查阅一下`mix-blend-mode`的文档。

完整代码演示\[2\]

## 轮播图 ##

轮播图老生常谈的功能，大多数都是用JavaScript的解决方案。这个CSS方案代码量也不少，使用哪种方案就根据实际情况来权衡咯。

![5c37d25e9a8dd8876ab6b5f3644fd549.gif][] 屏幕录制2021-07-19 下午12.04.17.gif

完整代码演示\[3\]

## 手风琴 ##

![8ba6b864a8b37e224cc96b2fca155a5a.gif][] 屏幕录制2021-07-19 下午1.22.00 (1).gif

完整代码演示\[4\]

## 放大镜 ##

之前写过一遍文章 我要造轮子系列 \\-Vue3放大镜组件\[5\] 是用vue3编写，代码量虽然不多，但肯定比CSS复杂，里面涉及处理坐标值、处理边界位置等等，所以CSS方案的放大镜还是一个不错的选择。

![6d85dd7993ef5915f5837ca67f62a380.gif][] 屏幕录制2021-07-19 下午1.44.09 (1).gif

完整代码演示\[6\]

## 打字效果 ##

如果用JavaScript编写需要用到定时器加截取字符串的动画。

![1491f4d0c14490d9782ced642c652c54.gif][] 屏幕录制2021-07-20 下午5.26.21.gif

<h1>Welcome to GuangZhou</h1>
    复制代码

@-webkit-keyframes typing { from { width: 0; } }
    @-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
    
    h1 { 
     font: bold 300% Consolas, Monaco, monospace;
     border-right: .1em solid black;
     width: 16.5em; 
     width: 21ch;
     margin: 2em 1em;
     white-space: nowrap;
     overflow: hidden;
     -webkit-animation: typing 7s steps(21, end),
     blink-caret .5s step-end infinite alternate;
    }
    复制代码

## `rem` 布局 ##

过去移动端用 `rem` 布局时候是根据不同的屏幕宽度设置不同的 `font-size` 来做到适配，就不得不用到JavaScript来设置。

例如：以 `750px` 设计稿作为基准，根节点设置 `font-size` 为 `100px` ,只考虑 `DPR` 为 `2` 的情况

JavaScript方案

document.querySelector('html').style.fontSize = `${window.innerWidth / 7.5 }px`;
    复制代码

CSS方案

html{
    font-size: 100vw / 750
    }
    复制代码

## 截断文本 ##

截断文本也是前端高频使用场景，相信很多同学已经用到它。过去是通过后台的截取，但这种方法容易丢失数据，也不利于SEO，而通过CSS截断则灵活多变，可统一运用到整个项目中。

这项技术主要运用了`text-overflow`属性，虽是css3新增的属性，但是在各大浏览器中却有很好兼容性。

### 单行截断文本 ###

.ellipsis {
        display: inline-block;
        width: 40px;
        white-space: nowrap;
        text-overflow :ellipsis;
        overflow: hidden;
    }
    复制代码

![e68eb82f0f96f0336a2c57c04c71e2ea.png][] image.png

### 多行截断文本 ###

.ellipsis {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    复制代码

![c8fa7e3b6136d9d251dfd50c774db653.png][] image.png

## 自定义 `input` 焦点光标的颜色 ##

有时设计师有些刁钻的需求，比如觉得`input`光标的颜色不能与整体风格统一，这时候我们就可以通过设置 `caret-color`属性来满足这个需求啦。

<input class="custom" value="光标变成红色啦" />
    复制代码

input.custom {
      caret-color: red;
    }
    复制代码

![719837820c2d08eabadcaf28b6dd95c9.png][] image.png

## 粘性的导航 ##

过去这个功能还需要用`offsetTop`和`window.scrollY`作判断。CSS3新增`position:sticky` 让我们很容易实现此功能，相信不少同学也开始使用此属性。具有粘性定位的元素将充当相对定位的元素，直到到达视口上的给定点然后变为固定定位的元素为止。使用`-webkit`前缀的浏览器支持高达92％。

.nav {
        position: sticky;
        top: 0;
    }
    复制代码

## 埋点统计 ##

当一个网站或者 App 的规模达到一定程度，需要分析用户在 App 或者统计网站的相应操作，则需要埋点统计用户行为，这个不用多说。上一篇文章能用CSS实现的就不用麻烦JavaScript\[7\]提到，利用 CSS 的 `content` 属性 `attr` 抓取资料，其实我们还可以在`content`属性中做埋点统计这个功能。

.link:active::after {
      color: red;
      content: url("填写统计的接口");
    }
    复制代码

当然这种方式使用比较简单的事件埋点。复杂的话还是需要 JavaScript 操作，JavaScript 埋点统计用户可以通过浏览器禁用，CSS的话没办法禁用。

另外使用这个`content`属性还有很多有意思的玩法，例如下图的加载动画。

![108ce5124cf3bd82e5cd69d5a24ee50e.gif][] 屏幕录制2021-07-19 下午1.28.51.gif

<h1 data-text="玩命加载中...">玩命加载中...</h1>
    复制代码

h1 {
        position: relative;
        color: rgba(0, 0, 0, .3);
        font-size: 5em
    }
    h1:before {
        content: attr(data-text);
        position: absolute;
        overflow: hidden;
        max-width: 7em;
        white-space: nowrap;
        color: #fff;
        animation: loading 8s linear;
    }
    @keyframes loading {
        0% {
            max-width: 0;
        }
    }
    复制代码

更有意思的聚光灯效果

![35cd81bd4eba075e3bc767cc7f4ee81c.gif][] 屏幕录制2021-07-20 上午10.59.38.gif

使用`clip-path`来实现遮罩效果，本例中属性值为`ellipse(100px 100px at 0% 50%)`，前两个参数为椭圆的x轴长度和y轴高度，`at`后面的两个参数为相对于自身元素的x轴位置和y轴位置。

注意：使用这个属性时，需要注意浏览器的兼容情况，例如：Safari需要加前缀`-webkit-` 在使用兼容前缀的时候，一定要保留原CSS（非前缀）代码，不可删去。

设置对文字设置背景时，默认是文字所在的块级元素覆盖背景，如果想要将背景仅作用于文字上，类似color的效果，可以使用背景遮罩`background-clip: text;`

<h1 dot-light="LIZHENWEN">LIZHENWEN</h1>
    复制代码

h1 {
        font-size: 9rem;
        font-family: Helvetica;
        letter-spacing: -.3rem;
        color: #333;
        position: relative;
    }
    
    h1::after {
        content: attr(dot-light);
        position: absolute;
        top: 0;
        left: 0;
        color: transparent;
        clip-path: ellipse(100px 100px at 0% 50%);
        animation: SpotLight 5s infinite;
        background-size: 150%;
        background-position: center center;
        -webkit-background-clip: text;
        background-clip: text;
    }
    
    @keyframes SpotLight {
        0% {
            clip-path: ellipse(100px 100px at 0% 50%);
        }
    
        50% {
            clip-path: ellipse(100px 100px at 100% 50%);
        }
    
        100% {
            clip-path: ellipse(100px 100px at 0% 50%);
        }
    }
    复制代码

完整代码演示\[8\]

配合伪元素`::marker`的使用，有意思的是，`::marker` 还是可以动态变化的，利用这点，可以简单制作一些有意思的 hover 效果。

![f1fb879b750783befc2a8765ab2fbbb9.gif][] 118149756-70500400-b444-11eb-9dd8-4a0c113ea2f9.gif

li {
      color: #000;
      transition: .2s all;
    }
    li:hover {
      color: #ff6000;
    }
    li::marker {
      content: '????';
    }
    li:hover::marker {
      content: '????';
    }
    复制代码

## 炫酷的火焰效果 ##

![2f47a9a061313aaace2aca4f4c8f0b4c.gif][] 屏幕录制2021-07-20 上午10.42.04.gif

看到这个火焰效果想必有很多同学第一时间想到的方案是用Three.js来实现，但它实打实用CSS实现的。笔者看到这个CSS效果的时候也是惊叹，刷新对CSS的认知，感觉自己要重学CSS节奏。Σ(⊙▽⊙"a

要实现这个火焰效果需要 `filter: contrast()` 与 `filter: blur()` 配合使用，看到`filter`相信很多同学都比较陌生。它是CSS3新增的一个滤镜属性。也是熟悉PS使用的同学，就会很容易理解这个属性。

完整代码演示\[9\]

## 最后 ##

虽然新一代CSS可以适应很多场景，但不要贪杯哦！！很多属性还是实验性阶段，兼容性有待商榷，同学们也要根据实际情况去使用。随着CSS版本的更新迭代，下一代CSS将会带来更多新特性，为我们提供更多开发便利性，大家拭目以待。

关于本文

# 来源：lizhenwen #

https://juejin.cn/post/6986967746453962782

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[12ef573d83354dfec255f2d4d6405285.png]: /images/20220829/3d68e98e1af945069c1b5002b6785d37.png
[CSS_JavaScript]: http://mp.weixin.qq.com/s?__biz=MzUzNjk5MTE1OQ%3D%3D&chksm=faef59cacd98d0dcd114cf5456c178b39040ba641aef287fb27801039b84b0591baf516b5c13&idx=1&mid=2247507218&scene=21&sn=ed8e7c25c26f5bf1ca6ca84f2f696d79#wechat_redirect
[8ba749a9faf4d75e461433921975b9fa.gif]: /images/20220829/c30838b58bb94314824bb0810d26ec7c.png
[5c37d25e9a8dd8876ab6b5f3644fd549.gif]: /images/20220829/c47b4acddb63460ab6c4a00fdd4555e9.png
[8ba6b864a8b37e224cc96b2fca155a5a.gif]: /images/20220829/fc2e00235b534ecaab488580ba855d86.png
[6d85dd7993ef5915f5837ca67f62a380.gif]: /images/20220829/df1c6d284b05466291510a91ebfa1d98.png
[1491f4d0c14490d9782ced642c652c54.gif]: /images/20220829/8d55f41c5e33404a872656a0ede4d40a.png
[e68eb82f0f96f0336a2c57c04c71e2ea.png]: /images/20220829/04e390277af14b328a63da36d2913eca.png
[c8fa7e3b6136d9d251dfd50c774db653.png]: /images/20220829/a485d4824c3b42599578e153ec9f7596.png
[719837820c2d08eabadcaf28b6dd95c9.png]: /images/20220829/a990e69c296948a8a0c526d78732929c.png
[108ce5124cf3bd82e5cd69d5a24ee50e.gif]: /images/20220829/2e3d69eb8a994814aa80cca1ad38fb29.png
[35cd81bd4eba075e3bc767cc7f4ee81c.gif]: /images/20220829/5583d8cf4ee3464085298330c21155cd.png
[f1fb879b750783befc2a8765ab2fbbb9.gif]: /images/20220829/8600ebe6f9db4080bf307190543fd519.png
[2f47a9a061313aaace2aca4f4c8f0b4c.gif]: /images/20220829/e9df7094761f4f9a97cf3fb39e77ffa1.png