摘要：
博客已迁移至 "http://lwzhang.github.io" 。 纯CSS实现一个微信logo并不难，难的是怎样用最少的 标签实现。我一直在想怎样用一个标签就能实现，最后还是没想出来，就只好用两个标签了。 首先需要两个标签元素： 先画个背景： 再画个大的椭圆： 小的椭圆利用 的`::befor 阅读全文
随笔分类 - CSS3
css3 transform属性多值的顺序问题
2015-11-15 18:16 by 那时候的我, 26278 阅读, 收藏, 编辑
摘要：
对于 属性的多值的顺序问题，我自己就被困扰过。后来知道了跟顺序有关，但是不知道为什么。我想应该很多人跟我以前一样，知其然不知其所以然。如果不知道的，也许这篇文章会对大家有所帮助。先来看一个例子。 代码: <div id="red1" </div <div id="red2" </div 代码... 阅读全文
元素transform: rotate()之后，元素宽高该怎么计算？
2015-11-13 23:16 by 那时候的我, 9863 阅读, 收藏, 编辑
摘要：
通常，利用 元素之后，我们并不会去在意元素大小的变化，因为看上去并没有什么变化。虽然看上去没有变化，其实是有变化的。下面用一个例子来说明一下。 ： <div id="rect" </div ： div { width:100px; height:100px; margin: ... 阅读全文
Flexbox + js实现滑动拼图游戏
2015-08-23 20:10 by 那时候的我, 1996 阅读, 收藏, 编辑
摘要：
滑动拼图就是把一张图片分成几等份，打乱顺序（下图），然后通过滑动拼凑成一张完整的图片。 要实现一个拼图游戏，需要考虑怎样随机的打乱顺序，怎样交换两张图片的位置，等等。但是，使用了Flexbox布局以后，这都不需要你去考虑，浏览器会帮你做，Flexbox就是这么的强大。关于Flexbox的介绍可以点击... 阅读全文
利用box-shadow制作loading图
2015-08-02 21:28 by 那时候的我, 1412 阅读, 收藏, 编辑
摘要：
我们见过很多利用css3做的loading图，像下面这种应该是很常见的。通常制作这种loading，我们会一个标签对应一个圆，八个圆就要八个标签。但是这种做法很浪费资源。我们可以只用一个标签，然后利用`box—shadow`来制作一个loading图。 首先，需要一个标签： 然后是css： ... 阅读全文
常用的不易记忆的css自定义代码
2015-07-14 23:06 by 那时候的我, 1499 阅读, 收藏, 编辑
摘要：
在制作页面时，经常会遇到需要自定义一些标签的默认行为(如：input的占位符等)，但这些默认的设置的css一般比较难记住,所以有必要自己做一下记录。下面是我经常用到的一些重设默认行为的css。### 1、占位符 ###在``标签中设置`placeholder`属性时，有时候因为需求，要修改占位符的默... 阅读全文
CSS3实现图片渐入效果
2015-03-07 20:17 by 那时候的我, 19416 阅读, 收藏, 编辑
摘要：
很多网站都有那种图片渐入的效果，如：[http://www.mi.com/minote/](http://www.mi.com/minote/)，这种效果用css3和一些js实现起来特别简单。拿我之前做的页面来说一下怎么利用css3来实现图片渐入效果。下面是页面中的一段html： ... 阅读全文
CSS3图片轮播效果
2014-04-27 11:44 by 那时候的我, 24240 阅读, 收藏, 编辑
摘要：
在网页中用到图片轮播效果，单纯的隐藏、显示，那再简单不过了，要有动画效果，如果是自己写的话(不用jquery等)，可能要费点时间。css3的出现，让动画变得不再是问题，而且简单易用。下面介绍我用css3与js写的一个图片轮播效果。 一般图片轮播就是三四张图片： ... 阅读全文