CSS变量带来的质变有哪些

这篇文章主要介绍了CSS变量带来的质变有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联服务项目包括霍州网站建设、霍州网站制作、霍州网页制作以及霍州网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，霍州网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到霍州省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

一、CSS变量带来的质变

CSS变量带来的提升绝不仅仅是节约点CSS代码，以及降低CSS开发和维护成本。

更重要的是，把组件中众多的交互开发从原来的JS转移到了CSS代码中，让组件代码更简洁，同时让视觉表现实现更加灵活了。

我们通过几个案例来说明这一变化。

二、简化了JS对DOM设置的介入

案例1：loading进度效果

例如实现下图所示的变量效果：

CSS变量带来的质变有哪些

外面有一层背景层，然后里面有进度条，还有进度值。

在过去，会使用两层div元素，然后JS去改变里面有颜色条条的宽度，同时设置进度值。

也就是，loading的进度效果和进度值全部都是JS直接设置的，JS同时对应多个HTML信息。

现在，有了CSS变量，JS所做的工作就非常简单，仅仅在容器元素上设置loading进度值即可，其他什么都不需要做，至于样式表现，或者进度值如何显示，全部都是CSS的事情。

相关代码如下：

图片1：

图片2：

图片3：

.bar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
}
.bar::before {
    display: block;
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    width: calc(1% * var(--percent));
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

可以看到，我们只需要一层div标签，DOM层级简单了，然后，需要修改的HTML变化项仅仅是一个 --percent 自定义属性而已。

眼见为实，您可以狠狠地点击这里： CSS百分比变量与进度条demo

三、CSS变量成为了CSS API接口

过去点击出现提示，切换等效果都需要JS针对特定的元素进行样式设置，现在有了CSS变量，我们只需要一段通用的非常简单的全局JS就可以了，JS就可以自己玩耍去了，其他效果，全部交给JS处理。

这段JS如下：

/**
 * @author zhangxinxu(.com)
 * @description 点击页面任意位置，标记坐标位置
 */
document.addEventListener('mousedown', function (event) {
    var target = event.target;
    var body = document.body;
    var html = document.documentElement;

    // 设置自定义属性值
    body.style.setProperty('--pagex', event.pageX);
    body.style.setProperty('--pagey', event.pageY);

    html.style.setProperty('--clientx', event.clientX);
    html.style.setProperty('--clienty', event.clientY);
    html.style.setProperty('--scrolly', window.pageYOffset);

    target.style.setProperty('--offsetx', event.offsetX);
    target.style.setProperty('--offsety', event.offsetY);
    target.parentElement.style.setProperty('--target-width', target.clientWidth);
    target.parentElement.style.setProperty('--target-height', target.clientHeight);
    target.parentElement.style.setProperty('--target-left', target.offsetLeft);
    target.parentElement.style.setProperty('--target-top', target.offsetTop);
});

可以看到，JavaScript代码再也不负责任何与交互行为相关的逻辑，直接变成了工具人，一个单纯地传递点击坐标位置，以及点击元素偏移和尺寸信息的工具人。

CSS得到了什么呢？

得到了一个巨大的宝藏，一个随时可以拿来使用的宝藏。

我想要点击按钮的时候有什么花哨的反馈，或者点击页面空白也来个创意的交互提示，完全不成问题，随用随取，无比方便，无比自由。

可以说，上面这段JS，或者类似的JS代码是未来web开发的标配。

我们来看看上面的代码可以实现怎样的效果。

案例2：按钮点击圈圈效果

点击按钮的时候有个圈圈放大的效果，圈圈放大的中心点就是点击的位置。

效果如下GIF所示：

CSS变量带来的质变有哪些

核心CSS代码如下：

.btn:not([disabled]):active::after {
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}
.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    left: var(--x, 0); top: var(--y, 0);
    pointer-events: none;
    background: radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}

:active 时候隐藏，同时设置过渡时间为0。于是，点击释放的时候，就会有过渡效果。

大家可以访问这个地址进行体验： https://xy-ui.codelabo.cn/docs/#/xy-button

案例3：点击页面出现文字效果

又例如，点击本文页面任意位置都会出现下图所示的提示信息。

CSS变量带来的质变有哪些

就是下面上面那段万能工具人JS加下面这段CSS实现的：

body:active::after {
    transform: translate(-50%, -100%);
    opacity: 0.5;
    transition: 0s;
    left: -999px;
}
body::after {
    content: 'zhangxinxu.com';
    position:fixed;
    z-index: 999;
    left: calc(var(--clientx, -999) * 1px);
    top: calc(var(--clienty, -999) * 1px);
    transform: translate(-50%, calc(-100% - 20px));
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

案例3：两个按钮下划线滑来滑去效果

以前，下图这种点击选项卡按钮，然后下划线滑来滑去，尺寸还变化效果，使用纯CSS实现很考验功力，几乎99.99%的开发都是借助JS去查询对应DOM元素，然后设置宽高和位置实现的交互效果。

CSS变量带来的质变有哪些

现在，有了工具人JS，只需要一段CSS就可以搞定了，甚至文字的高亮切换都可以纯CSS搞定，就是这么神奇。

下面这里的效果就是实现的实时效果（若没有效果，请访问原文张鑫旭 https://www.zhangxinxu.com/wordpress/?p=9477 ）：

点击任意的选项卡元素，就可以看到下划线滑到对应位置，同时为高亮的效果。

CSS变量带来的质变有哪些

其他资讯