• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS自定义属性制作动画

CSS3 web前端中文站 3年前 (2017-04-17) 839次浏览 已收录 0个评论

CSS变量 Web 动画 Animation

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 的@keyframesanimation来完成。

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

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

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

CSS 自定义属性制作动画

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

: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 自定义属性的其它功能还没有被我们挖掘出来,如果你发现了其更有意思的特性,欢迎与我们一起分享。

CSS 自定义属性制作动画

大漠

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

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS 自定义属性制作动画
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址