纯CSS打造火箭遨游太阳系——我们的征途是星辰大海!
CSS3
Eve
34人收藏 3721次学习

纯CSS打造火箭遨游太阳系——我们的征途是星辰大海!

Hi~火箭工程师们,今天我们来点好玩的。一个单页web app, 载着火箭遨游太空。由于用的是CSS,这个网页在手机上和电脑上都可以跑的很好哦。

 

 

最终演示:

 http://web.uvic.ca/~eolynyk/

 

我们将会用到下面这些CSS的知识点:

  • 关键帧(Key Frame)
  • Media Screen(用于响应式布局)
  • 选择器(Selectors)

在开始设计火箭之前,你要先会一点基础的HTML5和CSS3,如果不会的话,先去1KE上看看哦~

 

再有就是需要以下工具

  1. Sublime Text 2(其实最好是3,你懂的)
  2. 谷歌浏览器或者火狐浏览器

 

造火箭看起来很难吧!无须担心,今天我们会把两个教程组合一下,成为我们的参考:

 

 Pure CSS AJAX Loading Animation by Pete R.

http://www.onextrapixel.com/2013/07/22/fun-css-loading-animations/

 

 CSS: Animation Using CSS Transforms (Part 4) by The Art of Web

http://www.the-art-of-web.com/css/css-animation/

 

由于第二个教程中的火箭很丑,我们把火箭换成下面这个:

https://cdn4.iconfinder.com/data/icons/whsr-january-flaticon-set/512/rocket.png

 

记得加我们的QQ群(151115091)和微信号(wow1KE)哦!在1ke群里,你不但会得到老师们的帮助,而且还有志同道合的小伙伴们一起学习哦~

第一部分: 配置环境

此处内容需登录后浏览

第二部分第一小节:基础代码—背景

此处内容需登录后浏览

第二部分第二小节:基础代码—DIV

此处内容需登录后浏览

第三部分:太阳系的CSS

此处内容需登录后浏览

第四部分:火箭CSS

此处内容需登录后浏览

第五部分:移动端

此处内容需登录后浏览

最后的挑战

此处内容需登录后浏览

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部