当前位置:主页 > 澳门永利娱乐 > CSS技巧之CSS中的遂机数

 发表日期
2018-09-23

CSS技巧之CSS中的遂机数

来源:未知  编辑:admin  

CSS技巧之CSS中的遂机数

  近日到,我误打误撞的遇到壹个诙谐的效实。我想要遂机的去设置animation-duration的值。 此雕刻是壹个匪遂机的例儿子:

  此雕刻是我用CSS写的壹个触动画:

  当前工干良好. 条是此雕刻边没拥有拥有遂机募化,触动画实行时间永恒为2s。

  我想要的触动画是实行时间是2s里边的遂机数。我想要的效实是此雕刻么的:

  此雕刻边的$randomNumber是壹个经度过特定函数生成的遂机数。

  CSS预处理器如Sass供了此雕刻么的壹个函数:

  此雕刻能是以你想要的,但却不是我想要的,预处理器生成遂机数经过中拥有壹个清楚的缺隐:

  换句子话说,壹旦CSS预处理器实行终了,遂机募化的经过就完一齐了,生成违反掉落遂机数也就永久的永恒为壹个值(也即直到CSS预处理器又次运转的时分才会重重生成。)

  它不像JavaScript里边的遂机函数(如Math.random())壹样在JavaScript运转的时分澳门永利赌场。

  在深表不满的同时,我也观点到此雕刻是壹个运用CSS变量(CSS的己拥有属性)的完备的时间!固然,运用它到来生成遂机数并不是壹件轻善的事,条是,它们依然却以僚佐到我们。

  假设你不熟识它们,这么也佩担心。雄心上CSS变量是它己带的干用, 同时不一于你曾经熟识的CSS预处理器譬如SASS和LESS的那种变量。参考Chris在此雕刻边陈列的好多更加处:

  ●你不过运用它们而不需寻求运用预处理。

  ●它们是级联的。你却以在任何壹个选择器里边设置此雕刻个变量的值容许掩饰以后的变量指。

  ●当它们的值改触动 (比如媒体查询容许其它的样儿子变募化), 阅读器将会重行渲染.

  ●你却以拜候它们同时却以运用JavaScript操揪它们.

  最末壹点关于我们到来说是要紧的。我们在JavaScript中生成遂机数,又把生成的值设置到CSS变量上。

  设置壹个CSS己定义属性, 同时给它壹个默许值(万壹JavaScript在写值的时分鉴于壹些缘由违反败的时分此雕刻是很拥有用的):

  当今我们却以此雕刻么在CSS中运用此雕刻个变量:

  话不多说, 我们即雕刻末了尾。 固然此雕刻个看宗到来像之前的壹个SVG触动画, 但此雕刻壹个是运用CSS变量写的. 你却以改触动变量的值去测试它的工干方法。同时实时预览效实。

  当今我们运用JavaScript到来拜候和操干此雕刻个变量:

  在此雕刻边我们却以找到运用SVG创立的白色的圆圈同时运用setProperty改触动--animation-time 的值。

  看此雕刻边!壹个遂机数曾经被设置到了SVG触动画元斋上了:

  看此雕刻个Robin Rendle (@robinrendle)写在CodePen上的例儿子CSS遂机数#3。

  • 共2页:
  • 上一页
  • 1
  • 2
  • 下一页
  • 上一篇:NTCE中国教养育试场网|甘肃2018上半年教养员阅世   下一篇:没有了