企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站制作

Website development

随机数在CSS

发布时间:2017-01-12 13:17:51

TAGS:网站制作

blob.png

我陷入了另一则有趣的问题。我想动画元素与随机动画时间这是非随机的起点:


这是我写的使动画的CSS:

blob.png

到现在为止,一直都还不错.但是没有随机发生,这是一个固定的2秒。

我想动画的2秒的时间是随机的。我想基本上写:


blob.png

哪里美元的随机数是随机的程序

css预处理器像SASS提供一个()函数


blob.png

这可能对你是完美的,它不太适合我。随机数生成的预处理过程中有一个大的警告:

随机在SASS是随机选择一个故事中的主要人物的名字。这只是随机的时候写的。它不会改变。


换句话说,一旦CSS处理,随机结束。这个数字被锁定在价值(即直到永远的预处理器运行一次)。

它不是像JavaScript中的一个随机数(例如数学。()),随机数生成的JavaScript运行时。


所以在叹息着人大声我我能意识到,这实际上是用本地的CSS变量的绝佳机会(自定义属性)!自己,他们不会做随机数容易,但正如我们将看到的,他们仍然可以帮助我们。

如果你不熟悉他们,然后不要担心。他们是本地变量,建立有效的CSS语言本身,但他们从不同的类变量,你可能熟悉一个预处理器SASS或更少。克里斯列举了许多好处而回:


你可以使用它们没有预处理的需要

他们级联。你可以设置一个变量在任何选择器设置或重写它的当前值。

当他们的变化(例如,平均值,进行查询或其他)浏览器重画的需要

你可以访问使用JavaScript

最后一点是什么对我们很重要。我们要生成JavaScript中的随机数,然后将其移动到CSS的自定义属性。


一是创建CSS自定义属性需要一个默认值(如果我们在一个时刻写JavaScript没有以任何理由有用):


blob.png

现在我们可以用在我们的CSS这样的变量:


blob.png

非戏剧性地,我们我们开始在哪里。虽然这个演示现在看起来完全一样,我们以前的动画SVG技术,这是一个使用CSS变量代替。你可以测试,一切都只是改变CSS变量看动画更新。

现在我们都设置了访问和操作,通过JavaScript的自定义属性。


blob.png

从这里我们可以在SVG发现红圈的变化动画的时间……通过CSS变量设定属性方法


blob.png

这里是!一个随机生成的数字在CSS被应用到SVG动画:

blob.png


这是向前迈出的一步,因为随机数生成的JavaScript运行时,因此每次不同。这非常接近我们想要的,但让这一点更难了:让我们随机,动画时间定期为它的运行


幸运的是,我们有JavaScript现在的工作,所以我们可以更新自定义属性时,我们要。这里是一个例子,我们更新动画时间每一秒:


blob.png

这就是我所追求的:



记住,这是有用的CSS变量(自定义属性)的支持仍然是一个小的片状,所以要小心。虽然我们可以做的是逐步提高这个动画一样:


blob.png

如果CSS变量不支持我们还是会得到一些动画的一种表现,即使它不是精确我们想要的是什么

值得注意的是,CSS变量不是随机的动画持续时间的唯一途径。我们可以通过JavaScript访问DOM元素和应用随机值直接进入风格:


blob.png

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


blob.png

只是撒一个更可能在这里,你也可以做这个与eqcss


blob.png

你希望随机CSS本身可用吗?我不知道有任何谈话。即使有,我们可能将不得不等待很长一段时间来使用它。沿着这些线路,Philip Walton最近写的有多么困难写一个真实的polyfill在CSS的随机数。处理JavaScript更容易!

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7045,0.html

您还有可能感兴趣的内容

Related articles

建站流程

Website development

  • 网站需
    求分析
  • 网站策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • +86 10 64758810

    13718494791

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。
嘿,我来帮您!