扫描关注网站建设微信公众账号

微信二维码

当前位置:济南网站优化 > 技术洞察 > 建站 > 微信暗黑模式?两种方法让你的网页也进入暗黑模式

微信暗黑模式?两种方法让你的网页也进入暗黑模式

时间:2020-05-11•16:21:48文章来源:网页暗黑模式文章作者:网站制作人

随着近期“微信的暗黑模式”的热搜,仿佛告诉我们微信也逃脱不了暗黑时代的到来,市面上大多数的网页也在为跟进黑暗模式而做出改变,那么作为一个时尚又紧随潮流的网站制作者,怎么让自己的网站在瞬间进入黑暗模式呢?

这里就不得不感叹css3 的奇妙之处了,首页我们需要了解css3中一个属性——filter,即滤镜属性。

首先我们应该知道这个属性的兼容性,看下图:

网站建站公司

网站建站注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。IE8 及更低版本浏览器通常使用 opacity 属性。

了解兼容性之后,我们需要知道filter中的两个函数,invert和hue-rotate两个CSS3过滤器

太复杂了看不懂?没问题,我来直接教你怎么用,看下边:

(1)filter: invert() — 是从0到1的刻度,1是从白变黑。 

(2)filter: hue-rotate() — 用于改变你元素的颜色,同时或多或少保持原本相同的色系。属性的值0-360deg。

在我们页面的body标签上添加这两个属性,我们就可以快速尝试把我们的网站变成"黑暗模式"。

注意:若body和html上没有设置background的颜色属性,这个效果将不会生效。

CSS的代码如下:(这块的代码是开头部分gif动图页面所展示的基础效果)

实际效果就是我们开头的动图效果,但是随之而来也会有一些小问题诞生,我们会发现页面上的图片颜色受到了影响,但是仅仅使用css过滤器是不能完美的实现黑暗模式的转变的,因此在这样的基础上我们可以选择另一种途径——JavaScript,而最近出的一款js辅助插件—Darkmode.js便可以实现这个效果。

?? Darkmode.js

Darkmode.js运用的是css里面的一个属性,叫做mix-blend-mode,这个属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

通过Javascript判断页面上的元素需要黑化的,哪些是不需要黑化的,例如图片等元素受到影响导致颜色出现问题。

使用Darkmode.js非常简单,只要在网页底部脚本插入以下代码:

最后的总结

我们可以从这个案例中可以看出css的效果极其强大,除了这些小的效果,css还可以有很多动态的样子,在这里推荐掘金,github等论坛,无数的大神项目等着你,最后的最后,将“学海无涯苦作舟”这一名句赠与我同样在20多岁不断努力的同龄人,关注我吧,期待我的下次分享~

上一篇:聊聊企业网站建设的基本要素 gkd

下一篇:做CMS网站模板业能稳定日赚500你信不?

文章关键词
网站设计
暗黑模式
网页优化