能用CSS实现的就不用麻烦JavaScript(Part2)
点击上方 前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
前言
凡是可以用 JavaScript 来写的应用,最终都会用 JavaScript 来写。— Atwood定律
凡是可以用CSS实现的就不用麻烦JavaScript。— 笔者定律
具体看同学们自己的使用习惯。不过用好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
的文档。
完整代码演示[2]
轮播图
轮播图老生常谈的功能,大多数都是用JavaScript的解决方案。这个CSS方案代码量也不少,使用哪种方案就根据实际情况来权衡咯。
完整代码演示[3]
手风琴
完整代码演示[4]
放大镜
之前写过一遍文章 我要造轮子系列 \-Vue3放大镜组件[5] 是用vue3编写,代码量虽然不多,但肯定比CSS复杂,里面涉及处理坐标值、处理边界位置等等,所以CSS方案的放大镜还是一个不错的选择。
完整代码演示[6]
打字效果
如果用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[7]提到,利用 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%);}
}
复制代码
完整代码演示[8]
配合伪元素::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使用的同学,就会很容易理解这个属性。
完整代码演示[9]
最后
虽然新一代CSS可以适应很多场景,但不要贪杯哦!!很多属性还是实验性阶段,兼容性有待商榷,同学们也要根据实际情况去使用。随着CSS版本的更新迭代,下一代CSS将会带来更多新特性,为我们提供更多开发便利性,大家拭目以待。
关于本文
来源:lizhenwen
https://juejin.cn/post/6986967746453962782
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
能用CSS实现的就不用麻烦JavaScript(Part2)相关推荐
- 宽带连接错误的处理办法651、691、623、678、645、720、721、718、734、769、619、676、815(留着吧,不用麻烦别人喽)
宽带连接错误的处理办法651.691.623.678.645.720.721.718.734.769.619.676.815(留着吧,不用麻烦别人喽) 错误代码651意思为 您的调制解调器(或其它连 ...
- html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
- CSS选择器老起名字太麻烦, 有这一个:nth选择器就够了!
文章目录 基础篇 :nth-child(n)选择器 示例1 示例2 示例3 p:nth-of-type(n)选择器 示例4 示例5 进阶篇 :nth-child(表达式) 和 nth-type-of( ...
- CSS不同背景显示不用颜色的文字
先上效果: 黑背景显示白字,白背景显示黑色,文字在黑白背景之间来回滚动. 实现方式: html: <div></div> css: div {height: 100vh;bac ...
- 微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)
上一篇讲了WXML:小程序版HTML,这一篇介绍WXSS:小程序版CSS. 1. WXSS:小程序版CSS. WXSS是一套样式语言,为了便于前端开发的上手,WXSS同HTML的CSS样式文件大部分特 ...
- document.getelementbyid css,使用document.getElementById()从css获取值。style.height javascript...
我试图通过 var high = document.getElementById("hintdiv").style.height; alert(high); 摆脱一个div框高度值 ...
- html+css复习之第2篇 | javascript
1. java 中定义数组和对象: 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, 10]对象(Object)字面量 定义一个对象: {firstName:" ...
- js html 导出word 不用activexobject,javascript下用ActiveXObject控件替换word书签,将内容导出到word后打印第2/2页...
javascript下用ActiveXObject控件替换word书签,将内容导出到word后打印第2/2页 更新时间:2008年06月21日 22:57:31 作者: 由于时间比较紧,没多的时候 ...
- js html css淘宝足迹日历效果,JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下 实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年 ...
最新文章
- Windows10怎么创建后门?
- 华为手机怎么看图片属性_华为手机音量小怎么办
- 分类(category)是门学问
- 1.PostgreSQL的学习
- mysql默认数据库名称,默认的MySQL数据库名称
- 计算机自动关闭硬盘,你遇到过电脑硬盘自动关闭的问题吗?
- 80多个Ajax解决方案
- python新手图解_Python完全新手教程
- Quartz.Net定时任务简单实用(实例)
- Linux双网卡下的网络故障排查
- python的自省机制
- 基于SSM的餐厅点餐系统设计与实现(Java+MySQL)
- minecraft兑换码领取!
- OpenGL初学者入门——学习指南【共 9 篇文章】
- B站左程云算法视频笔记05
- python基础教程:python实现PID算法及测试的例子
- 针对【BIEB六人行活动】第三季的部分问题一
- 百例小结(1)_李晓瑞_廊坊师范提高班十五期_新浪博客
- 迟来239天的投名状
- linux打开文件夹所有文件名,获取文件夹下的所有文件名 (linux windows)
热门文章
- easypoi 多sheet导入_easy-poi: Easy-POI是一款Excel导入导出解决方案组成的轻量级开源组件。...
- 关于用户表空间配额的问题
- R语言文本挖掘展示:画词云图
- 除了Navicat和DBeaver,还有没有免费又好用的数据库管理工具推荐
- 今日头条,今日特卖自媒体号如何申请。
- Java为什么需要数据类型
- 从零搭建外卖CPS外卖公众号教程,为你带来睡后收入
- js闭包是什么?对js闭包的理解
- 遇到 *.7z001 *.7z.002 *.7z.003 如何用winrar解压缩
- 打开一个英文文本文件,编写程序读取内容,将其中的小写字母转换为大写,大写字母转化为小写