HTML5和CSS3现在越来越备受网站建设者们的关注，它既简单，且网页版也好看。那么生成器就在自动生成代码时扮演者重要角色，它们非常适用于那些要做很多重复性工作的开发人员和设计人员，生成器可以帮他们解决这些繁琐的工作。在本文中，我们精心挑选了一些经验丰富开发人员和设计人员常用HTML5、CSS3代码生成器。

HTML5代码生成器

网上有五六种可以生成优质代码的HTML5生成器，其中的真谛是HTML5样板文件，我们不要自以为然的把样板文件当成是生成器，虽说这样，大多数开发者还是把它当作是他们第一个网站的模板。回到主题，要找到一个好的HTML5生成器并不是那么容易的事，因为网上有成千上万的网站提供各种各样的代码生成器。正因为如此，我们经常会被搞的稀里糊涂。不过，我们还是设法找到了一些比较好的生成器在本文中分享给大家。

脚本化css

下面通过css实现动画效果，可以使用脚本化的css实现滑入，轮廓伸缩的列表，即动态的HTML，一个过时的说法DHTML

一些css的基础知识

之前已经看过厚厚的一本大书，现在简单看一下，补充一下不知道的点

层叠

web浏览器组合元素的style属性，然后再计算样式。

颜色透明度和半透明

颜色有半透明的颜色（不知道为什么edge不兼容）

脚本化内联样式

什么是伪元素

让我们先看看W3的伪元素官方定义：

伪元素用来创建HTML文档语言指定之外文档树的抽象层。比如HTML没有提供文档元素内容的首字母或第一行的访问机制。CSS伪元素允许作者引用这些除此之外无法访问的信息。伪元素还提供一种方法来引用不存在于文档中的内容。（比如，::before 和 ::after ）。

一个伪元素由2个冒号（::）加上伪元素的名字所定义。

:: 标记是CSS2.1新规范中引入的，用来区分伪类（pseudo-classes）和伪元素（pseudo-elements）。但出于现有样式表兼容性原因，用户代理必须也能支持CSS1和CSS2中引入的单冒号伪元素标记（也就是说，:first-line, :first-letter, :before 和 :after）。但是CSS2.1及以后版本新引入的伪元素不支持这种兼容语法。

示例图片

在CSS3之前，想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式，而CSS3问世之后，想要实现这样的效果变得非常简单，只需一个CSS3属性就可以轻松实现了。

这就是今天所要提到的box-reflect属性。

咱们先看看W3C给出的box-reflect语法：

box-reflect：none | <direction> <offset>? <mask-box-image>? （?代表可缺省，也就是后俩属性可有可无）

点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

好雨知时节，当春乃发生。 随风潜入夜，润物细无声。

春节已经过去，新的一年刚刚开始，小伙伴们，今年你的目标是什么？定个小目标，挣它一个亿？分享一下我的目标，是让大家的web前端能力，更上一层楼。

下面进入主题，看下图：

这个动画效果，如果让你来做，你会选择什么方式？相信很多小伙伴都会用gif图片。其实用css实现也很简单。