现代 CSS

CSS自定义属性制作动画

作者：大漠 日期：2017-02-23 点击：4716
CSS变量
Web动画
Animation
CSS自定义属性
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

CSS自定义属性又称为CSS的变量或者原生变量。其和CSS处理器里的变量还是略有不同，但这篇文章我们要聊的并不是这个东东，咱们想聊聊CSS自定义属性怎么制作动画。

在继续之前，咱们都知道现在制作Web动画一般是通过CSS的Animation或者Web Animation API来完成（也就是JavaScript制作动画）。但有了CSS自定义属性之后，配合简单的几行JavaScript代码，也可以实现一些动画效果。那么CSS自定义属性是如何制作动画呢？

如果你感兴趣的，请继续...

CSS自定义属性

CSS自定义属性最早称之为CSS变量，更官方一点的称谓是CSS自定义属性级联变量。

官方对CSS变量是这样描述的：

变量，是标识符和可以用任何常规值替代值之间的关联，使用var()函数表示法：var(- example-variable)返回--example-variable的值 。

对CSS自定义属性是这样描述的：

自定义属性，这是表单的特殊属性 --* 这里*表示变量名称。这些用于定义给定变量的值：--example-variable：20px; 是一个CSS声明，使用自定义 --*属性将CSS变量--example-variable的值设置为20px。

CSS自定义属性的使用方法

为了能更好的理解后面的内容，先简单的回忆一下CSS自定义属性的使用方法。

可以像下面那样先声明一个变量：

:root {
    --primary-color: green;
}

然后在需要使用的地方通过var()函数来调用：

body {
    background-color: var(--primary-color);
}

这个时候body的背景颜色是green。如果你想让body背景颜色变成gray时，你只需要修改--primary-color。看上去是不是像CSS处理器中变量的使用方法。

是不是很简单，如果你觉得就这点内容不够深入，可以阅读早前译的一篇文章《深入学习CSS自定义属性》。这里就不再深入，把篇幅留给后面的内容。

CSS制作动画

CSS制作动画已经不是什么新课题了，大家在平常的业务中或许已经使用过了。主要是通过CSS的@keyframes和animation来完成。

比如@wentin去年在第三次CSS开发才大会上分享的胡子抖动的动画。

上面这个小胡子是纯CSS代码绘制的哟，而且@wentin有一个特别有意思的项目，就是使用CSS绘制很多小Icon，这里特别推荐一下，感兴趣的猛击这里查看。

回到我们今天的话题上来，动画通过@keyframes声明了shakeRight和shakeLeft两个动画，然后在伪元素::before和::after调用这两个动画。也就是你上面看到的效果。

CSS自定义属性制作动画

这里开始才是我们今天的关键。假设在上面的示例基础上，我把@keyframes和animation干掉。然后声明三个变量：

:root {
    --mouse-x: 0.1;
    --mouse-y: 0.1;
    --rotate: 0.1;
}

在调用的时候，可能通过var()来调用。比如说定位胡子的位置left：

.mustache {
    ...
    left: var(--mouse-x);
}

这样其实我们的left值是0.1并不是我们想要的，那么很简单，可以借助calc()函数来做一下处理：

.mustache {
    ...
    left: calc(1000px * var(--mouse-x));
}

这个时候left的值就是100px。

那问题来了，我们怎么让小胡子动起来呢？这个时候需要借助JavaScript来完成。我们可以通过setProperty()方法重置在:root{}中声明的变量，比如：

function sway(xPos, yPos) {
    let wh = window.innerHeight / 2,
    ww = window.innerWidth / 2;
    document.body.style.setProperty("--mouse-x", (xPos - ww) / 25+"deg");
}

document.addEventListener("mousemove", function(e) {
    sway(e.clientX,e.clientY);
})

通过mousemove事件，改变了--mouse-x的值。这里需要特别注意了，我们给--mouse-x传了一个默认值(xPos - ww) / 25+"deg"。那么回到我们的示例中来：

.mustache {
    ...
    left: calc(1000px * var(--mouse-x, 0.1));
}
.mustache:before {
    ...
    transform: rotate(calc(-40deg * var(--rotate, 0.1)));
}
.mustache:after {
    ...
    transform: rotate(calc(40deg * var(--rotate, 0.1)));
}

使用类似的方法，添加JavaScript代码：

(function changeVar() {
    var root = document.documentElement;
    document.addEventListener('mousemove', function(e) {
        var x = e.clientX / innerWidth;
        var y = e.clientY / innerHeight;
        var deg = Math.random()*(e.clientX - e.clientY) / e.clientX;

        root.style.setProperty('--mouse-x', x);
        root.style.setProperty('--mouse-y', y);
        root.style.setProperty('--rotate', deg);
    });
})();

这个时候你在屏幕中移动鼠标，能看到小胡子左右能移动，而且胡子也在上下抖动：

你也可以点击这里浏览全屏的动画效果。

是不是很简单，配合一定的事件，通过setProperty()方法改变对应的变量值。那么在实际中运用类似原理的地方有很多，比如说下面的两个示例：

移动鼠标改变图片的边框大小和模糊度：

移动鼠标改变图片的旋转角度值：

基于这样的思路，你也能很轻松的实现不同的动画效果，如果在移动端上，你也可以配合重力感应或者陀螺仪等功能，实现一些更有创意的动效。

总结

CSS新增的自定义属性是个很有意思的特性，除了能让我更好的管理我们的代码，实现类似CSS处理器的一些特性之外。还可以通过setProperty()配合JavaScript的一些事件实现一些动画效果。正如上文中提到的动效示例。当然CSS自定义属性的其它功能还没有被我们挖掘出来，如果你发现了其更有意思的特性，欢迎与我们一起分享。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/create-animation-with-css-variables.htmlAir Max 95 - Fresh Mint

返回顶部