代码改变世界

随笔档案-2015年08月

使用sass与compass合并雪碧图(二)

2015-08-30 16:30 by 那时候的我, 1548 阅读, 收藏, 编辑
摘要: 上一篇文章介绍了怎样使用`compass`合并雪碧图,生成的`icons.css`文件中单位是`px`,PC端可以直接在html文件中使用,但在移动端,我们需要根据不同分辨率的屏幕,来缩放图片大小,显然使用`px`单位肯定是不行的。所以需要做一下单位转换的工作。移动端使用`rem`作为单位是最合适不... 阅读全文

使用sass与compass合并雪碧图(一)

2015-08-29 21:55 by 那时候的我, 2551 阅读, 收藏, 编辑
摘要: 雪碧图就是很多张小图片合并成一张大图片,以减少HTTP请求,从而提升加载速度。有很多软件可以合并雪碧图,但通常不太容易维护,使用compass生成雪碧图应该算是非常方便的方法了,可以轻松的生成雪碧图,而且易维护。## 安装sass与compass ##安装sass可以参考[这里](http://ww... 阅读全文

Flexbox + js实现滑动拼图游戏

2015-08-23 20:10 by 那时候的我, 1925 阅读, 收藏, 编辑
摘要: 滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片。 要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等。但是,使用了Flexbox布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox就是这么的强大。关于Flexbox的介绍可以点击... 阅读全文

利用box-shadow制作loading图

2015-08-02 21:28 by 那时候的我, 1357 阅读, 收藏, 编辑
摘要: 我们见过很多利用css3做的loading图,像下面这种应该是很常见的。通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签。但是这种做法很浪费资源。我们可以只用一个标签,然后利用`box—shadow`来制作一个loading图。 首先,需要一个标签: 然后是css: ... 阅读全文