第一步，双击打开HBuilder编辑工具，新静态页面，transition.html，如下图所示：第二步是插入无序列表ul添加class属性；利用ul li设置宽度、高度和行高属性，如下图所示：第三步，在浏览器中保存代码并显示效果，如下图所示：第四步，在ul li添加选择器transition属性，background-color .5s ease-in，如下图所示：第五步，再次保存代码并在浏览器中预览页面效果，从元素块依次拖动显示颜色，如下图所示：第六步，然后使用nth-child设置背景颜色的选择器控制器，background-color，如下图所示：