前言
但凡能够用 JavaScript 来写的利用，最终都会用 JavaScript 来写。— Atwood定律
但凡能够用CSS实现的，最终都会用CSS实现。— 笔者定律
具体看同学们本人的应用习惯。不过用好CSS，还是能够进步不少开发效率，至多代替很多JavaScript场景，缩小JavaScript代码。
上一篇文章能用CSS实现的就不必麻烦JavaScript提到好几种罕用场景，这次笔者再分享多几个用CSS代替JavaScript的场景。心愿大家能在日常开发中应用到。
拾色器
拾色器是JavaScript高频应用场景，如果本人开发一个也是非常复杂的，找第三方插件用也要肯定的学习老本。input标签的type字段提供了Color类型，它让咱们很容易去应用拾色器，另外这个拾色器还能够汲取整个电脑桌面的色彩。
<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的文档。
残缺代码演示
轮播图
轮播图陈词滥调的性能，大多数都是用JavaScript的解决方案。这个CSS计划代码量也不少，应用哪种计划就依据理论状况来衡量咯。
残缺代码演示
手风琴
残缺代码演示
放大镜
之前写过一遍文章 我要造轮子系列 -Vue3放大镜组件 是用vue3编写，代码量尽管不多，但必定比CSS简单，外面波及解决坐标值、解决边界地位等等，所以CSS计划的放大镜还是一个不错的抉择。
残缺代码演示
打字成果
如果用JavaScript编写须要用到定时器加截取字符串的动画。
<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;}多行截断文本
.ellipsis { width: 300px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}自定义 input 焦点光标的色彩
有时设计师有些刁钻的需要，比方感觉input光标的色彩不能与整体格调对立，这时候咱们就能够通过设置 caret-color属性来满足这个需要啦。
<input class="custom" value="光标变成红色啦" />input.custom { caret-color: red;}粘性的导航
过来这个性能还须要用offsetTop和window.scrollY作判断。CSS3新增position:sticky 让咱们很容易实现此性能，置信不少同学也开始应用此属性。
具备粘性定位的元素将充当绝对定位的元素，直到达到视口上的给定点而后变为固定定位的元素为止。 应用-webkit前缀的浏览器反对高达92％。
.nav { position: sticky; top: 0;}埋点统计
当一个网站或者 App 的规模达到肯定水平，须要剖析用户在 App 或者统计网站的相应操作，则须要埋点统计用户行为，这个不必多说。
上一篇文章能用CSS实现的就不必麻烦JavaScript提到，利用 CSS 的 content 属性 attr 抓取材料，其实咱们还能够在content属性中做埋点统计这个性能。
.link:active::after { color: red; content: url("填写统计的接口");}当然这种形式应用比较简单的事件埋点。简单的话还是须要 JavaScript 操作，JavaScript 埋点统计用户能够通过浏览器禁用，CSS的话没方法禁用。
另外应用这个content属性还有很多有意思的玩法，例如下图的加载动画。
<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; }}更有意思的聚光灯成果
应用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%); }}残缺代码演示
配合伪元素::marker的应用，有意思的是，::marker 还是能够动态变化的，利用这点，能够简略制作一些有意思的 hover 成果。
li { color: #000; transition: .2s all;}li:hover { color: #ff6000;}li::marker { content: '';}li:hover::marker { content: '';}炫酷的火焰成果
看到这个火焰成果想必有很多同学第一工夫想到的计划是用Three.js来实现，但它实打实用CSS实现的。笔者看到这个CSS成果的时候也是惊叹，刷新对CSS的认知，感觉本人要重学CSS节奏。(⊙▽⊙"a
要实现这个火焰成果须要 filter: contrast() 与 filter: blur() 配合应用，看到filter置信很多同学都比拟生疏。它是CSS3新增的一个滤镜属性。也是相熟PS应用的同学，就会很容易了解这个属性。
残缺代码演示
最初
尽管新一代CSS能够适应很多场景，但不要贪杯哦！！很多属性还是实验性阶段，兼容性有待商讨，同学们也要依据理论状况去应用。随着CSS版本的更新迭代，下一代CSS将会带来更多新个性，为咱们提供更多开发便利性，大家刮目相待。