登录  /  注册
首页 > web前端 > css教程 > 正文

CSS技巧之CSS中的随机数

阿神
发布: 2017-01-24 11:49:00
原创
5123人浏览过

最近,我误打误撞的遇到一个有趣的问题。我想要随机的去设置animation-duration的值。  这是一个非随机的例子:

这是我用CSS写的一个动画:

@keyframes flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#red {
  animation: flicker 2s ease alternate infinite;
}
登录后复制

目前工作良好. 但是这里没有随机化,动画执行时间固定为2s。

我想要的动画是执行时间是2s以内的随机数。我想要的效果是这样的:

.element {
  animation: flicker $randomNumber alternate infinite;
}
登录后复制

这里的$randomNumber是一个通过特定函数生成的随机数。

CSS预处理器如Sass提供了这样的一个函数:

$randomNumber: random(5);

.thing {
  animation-duration: $randomNumber + s;
}
登录后复制

这可能是以你想要的,但却不是我想要的,预处理器生成随机数过程中有一个明显的缺陷:

Sass中,随机数生成过程就像是从一个故事中选择名字的过程,它仅仅在写完之后随机取出,然后它就不再变化了。
— jake albaugh (@jake_albaugh) 2016年12月29日
登录后复制

换句话说,一旦CSS预处理器执行完毕,随机化的过程就结束了,生成得到随机数也就永远的固定为一个值(也即直到CSS预处理器再次运行的时候才会重新生成。)

它不像JavaScript里边的随机函数(如Math.random())一样在JavaScript运行的时候产生随机数。

在深表遗憾的同时,我也意识到这是一个使用CSS变量(CSS的自有属性)的完美的机会!虽然,使用它来生成随机数并不是一件容易的事,但是,它们仍然可以帮助到我们。

如果你不熟悉它们,那么也别担心。事实上CSS变量是它自带的功能, 并且不同于你已经熟悉的CSS预处理器比如SASS和LESS的那种变量。参考Chris在这里列举的许多好处:

●你可是使用它们而不需要使用预处理。

●它们是级联的。你可以在任何一个选择器里边设置这个变量的值或者覆盖当前的变量指。

●当它们的值改变 (例如媒体查询或者其它的状态变化), 浏览器将会重新渲染.

●你可以访问它们并且可以使用JavaScript操纵它们.

最后一点对于我们来说是重要的。我们在JavaScript中生成随机数,再把生成的值设置到CSS变量上。

设置一个CSS自定义属性, 并且给它一个默认值(万一JavaScript在写值的时候由于一些原因失败的时候这是很有用的):

/* 设置默认的动画执行时间 */
:root {
  --animation-time: 2s; 
  }
登录后复制

现在我们可以这样在CSS中使用这个变量:

#red {
  animation: flicker var(--animation-time) ease alternate infinite;
  }
登录后复制

话不多说, 我们立即开始。 尽管这个看起来像之前的一个SVG动画, 但这一个是使用CSS变量写的. 你可以改变变量的值去测试它的工作方式。并且实时预览效果。

现在我们使用JavaScript来访问和操作这个变量:

var time = Math.random();
登录后复制

在这里我们可以找到使用SVG创建的红色的圆圈并且使用setProperty改变--animation-time 的值。

var red = document.querySelector('#red');
red.style.setProperty('--animation-time', time +'s');
登录后复制

看这里!一个随机数已经被设置到了SVG动画元素上了:

看这个Robin Rendle (@robinrendle)写在CodePen上的例子CSS随机数#3。

这比起之前的有了很大的进步因为它的值是JavaScript运行时产生的随机数,它每一次都在变化。 这成功实现了我们想要的效果, 但做到这一点我们还有些困难: 在运行时定期的animation-duration一个随机数.

幸运地是,我们现在可以用JavaScript了,我们可以根据我们想要的更新自定义变量的值。这是一个我们每秒更新animation-duration的值的例子:

var red = document.querySelector('#red');

function setProperty(duration) {
  red.style.setProperty('--animation-time', duration +'s');
}

function changeAnimationTime() {
  var animationDuration = Math.random();
  setProperty(animationDuration);
}

setInterval(changeAnimationTime, 1000);
登录后复制

这正是我想要的: 看这个Robin Rendle (@robinrendle)写在CodePen上的例子CSS随机数#4。

不过得记住一点,CSS变量(自定义属性)的支持性仍然不是太好,因此使用时要当心。 我们可以实现一个像这样的渐进增强的动画:

#red {
  animation: flicker .5s ease alternate infinite;
  animation: flicker var(--animation-time) ease alternate infinite;}
登录后复制

如果CSS变量没有得到支持我们也能看到部分的动画, 虽然它并不是我心目中的完美的样子.


值得庆幸的是,CSS变量并不是我们生成animation-duration随机值的唯一途径。我们可以使用JavaScript操作DOM直接设值到style上:

var red = document.querySelector('#red');
red.style.animationDuration = Math.floor(Math.random() * 5 + 1) + "s";
登录后复制

我们甚至可以等待动画完成之前,设置一个新的时间,如果我们想要这样的效果的话:

var red = document.querySelector('#red');

function setRandomAnimationDuration() {
  red.style.animationDuration = Math.floor(Math.random() * 10 + 1) + "s";
}

red.addEventListener("animationiteration", setRandomAnimationDuration);
登录后复制

这里只是列举了实现这个的可能途径,你也可以使用EQCSS来实现这个效果:

@element '#animation' {
  .element {
    animation-duration: eval('rand')s;
  }}
登录后复制
var rand = Math.random();EQCSS.apply();
登录后复制

你是否希望CSS本身自己就能够产生正确的随机数? 我目前为止没有看到相关的资料. 即使有,我可能也得过一段时间才能够真正的使用它.

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号