代码改变世界

随笔分类 - CSS3

纯CSS实现一个微信logo,需要几个标签?

2016-02-04 21:58 by 那时候的我, 6247 阅读, 收藏, 编辑
摘要: 博客已迁移至 "http://lwzhang.github.io" 。 纯CSS实现一个微信logo并不难,难的是怎样用最少的 标签实现。我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个标签了。 首先需要两个标签元素: 先画个背景: 再画个大的椭圆: 小的椭圆利用 的`::befor 阅读全文

css3 transform属性多值的顺序问题

2015-11-15 18:16 by 那时候的我, 24218 阅读, 收藏, 编辑
摘要: 对于 属性的多值的顺序问题,我自己就被困扰过。后来知道了跟顺序有关,但是不知道为什么。我想应该很多人跟我以前一样,知其然不知其所以然。如果不知道的,也许这篇文章会对大家有所帮助。先来看一个例子。 代码: <div id="red1" </div <div id="red2" </div 代码... 阅读全文

元素transform: rotate()之后,元素宽高该怎么计算?

2015-11-13 23:16 by 那时候的我, 7656 阅读, 收藏, 编辑
摘要: 通常,利用 元素之后,我们并不会去在意元素大小的变化,因为看上去并没有什么变化。虽然看上去没有变化,其实是有变化的。下面用一个例子来说明一下。 : <div id="rect" </div : div { width:100px; height:100px; margin: ... 阅读全文

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: ... 阅读全文

常用的不易记忆的css自定义代码

2015-07-14 23:06 by 那时候的我, 1428 阅读, 收藏, 编辑
摘要: 在制作页面时,经常会遇到需要自定义一些标签的默认行为(如:input的占位符等),但这些默认的设置的css一般比较难记住,所以有必要自己做一下记录。下面是我经常用到的一些重设默认行为的css。### 1、占位符 ###在``标签中设置`placeholder`属性时,有时候因为需求,要修改占位符的默... 阅读全文

CSS3实现图片渐入效果

2015-03-07 20:17 by 那时候的我, 17865 阅读, 收藏, 编辑
摘要: 很多网站都有那种图片渐入的效果,如:[http://www.mi.com/minote/](http://www.mi.com/minote/),这种效果用css3和一些js实现起来特别简单。拿我之前做的页面来说一下怎么利用css3来实现图片渐入效果。下面是页面中的一段html: ... 阅读全文

CSS3图片轮播效果

2014-04-27 11:44 by 那时候的我, 22830 阅读, 收藏, 编辑
摘要: 在网页中用到图片轮播效果,单纯的隐藏、显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间。css3的出现,让动画变得不再是问题,而且简单易用。下面介绍我用css3与js写的一个图片轮播效果。 一般图片轮播就是三四张图片: ... 阅读全文