css画一颗圣诞树
毫无疑问,您一直在关注我们的2012 SitePoint圣诞大特卖 -以冬季乐园为主题的设计盛会(仅限台式机版本)。 屏幕上日渐流行的元素包括溜冰者 , 跳熊 , 跳鱼到抽烟的机车上 ,还有很多其他东西。
现在,我们为该项目添加了“圣诞节故事模式”,供那些渴望深入研究故事流的人使用。
前往http://xmas.sitepoint.com/story/css查看当天的故事,减去当天的正常销售页面。
您还可以通过添加“#day /”和日期编号直接链接到特定日期。 例如,此链接将直接带您到第14天:
http://xmas.sitepoint.com/story/css#day/14
关于设计的一切
概念,布局和插图是哈雷·亚历山大 ( Harley Alexander )的聪明才智(如果是的话……是的!)。 正如他在这篇文章中解释的那样,Michael Sauter构建了我们的后端。 伊恩·科尔曼(Ian Coleman)让所有工作都一起工作,而裘德·阿克亚(Jude Aakjaer)管理着团队和项目。
动画由我决定。 我喜欢与动画混为一谈,圣诞节拍卖会是传授新想法的理想之地。 不,它不适用于非当前浏览器。 是的,确实有些场景可能会使您的CPU稍微有点紧张。
我的挑战是:
- 依靠纯CSS3动画,无需大量使用JavaScript
- 寻找尽可能多CSS动画方法
而且我几乎不必弯腰那些规则。 例如:
1)狗拉雪橇使用CSS(位置:固定)定位,并使用CSS过渡将其移动到位。 但是,我不得不加减法来使狗小跑。
2)您还会注意到火车动画第5天,第6天和第7天的烟雾在离开烟囱后立即脱离,就像真正的烟雾一样! 我需要一些JavaScript来计算烟囱相对于轨道的位置,然后相对于轨道上的该位置(而不是火车)放置每缕新烟。
因此,实际上,JavaScript被用于动画切换,而不是动画引擎。
如果您对此项目的CSS实质感兴趣 ,请加入我们的Christmas CSS Podling组中的对话。 我会在那儿闲逛,回答问题并获得最有效的反馈。
我还将在新的一年里在SitePoint上写一些更长的动画指导文章,所以请留意这些。
同时,每天检查一下一下, 让我们知道您的想法 。
翻译自: https://www.sitepoint.com/all-we-want-for-christmas-is-our-css/
css画一颗圣诞树