&nbs p;
一、时势造英雄
本文介绍的是个很小的tips, 是个很简单很实用的交互效果，就是按钮点击后按钮文字变成菊花，表示我正在进行中。
例如，去苹果官网买iPhone 6的时候：
以前我们实现可能会借助一个额外的标签，比方说：
<a href="javascript:" class="button"> <span class="text">按钮</span> <img src="juhua.gif" /> </a>
而本文要介绍的HTML则很简单：
<a href="javascript:" class="button">按钮</a>
没有额外的标签，也不使用伪元素，完全不影响原本按钮的 CSS 设置，无缝变化。
可能会疑问，为何我们以前实现要多标签嵌套处理呢？这个呢是受限于 当时 的历史环境。
所谓时势造英雄。现在这个 阶段 ，我们有2个变化：
浏览器 发展 。IE6很多企业和 团队 都不支持； 设计趋势 。现在流行扁平化设计，按钮都是纯色背景。于是，我们就可以以简洁轻松的方式实现按钮文字变菊花的效果。
二、demo实例以及效果
您可以狠狠地点击这里：文字变菊花实例demo
默认时候是这样子（截自Ch rom e）：
@H_ 777 _28@
在IE7浏览器下（IE11的IE7模式）如下：
更新于2015年7月25日
后发现，原生的IE7 -i E8浏览器并不支持 color:transparent , IE11的向下兼容模式都支持该透明关键字，是不准确的。因此，本文的技 术 点，可能就需要大家再好好斟酌斟酌了。
三、文字变菊花的原理
实现原理 跟上面两个时势变化密切相关，主要有2点：
transparent关键字 。按钮文字变菊花其中的文字隐藏就是使用的 color:transparent 这个声明，顾名思意，“颜色透明”。由于 transparent 这个关键字IE6不支持，好像会变成黑色（如果我没记错的话），所以以前在需要兼容IE6的时代，此方法是受阻的。 作为背景图片显示的菊花 。由于现在流行扁平化设计，按钮都是纯色背景。所以，我们可以任性一把，让菊花以 background-image 的形式和按钮背景色(background-color)无阻碍并行显示，然后我们需要的效果了！假设我们使用类名 loading 改变 我们的按钮状态，则上面原理用代码表示就是：
.loading { color: transparent; /* 文字 消失 */ background: # xxxxxx url(loading.gif) no-re PE at center ; /* 菊花在背景色中间出现 */ } 在实际开发 制作 的时候，我们不可能就上面两行代码，由于 loading 态基本上都是 disabled 态，所以，按钮的 hover 变化、 鼠标手 形等都需要重置，所以还需要其他些CSS, 都是行家，都懂的，不展示，demo页面有代码示意，有兴趣可以自行前去围观。
四、结束语
送佛送到西，水文水到底。
没啥好说的，月底了，一个月一篇产出都没有，说 不过 去，所以在这最后几个小时弄个水文，撑撑场面。
不过，有句话我要说清楚，不是我懒了，实在分身乏术。
下个月 应该 会好 一点 。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小小小tip: 按钮文字无缝变菊花 全部内容，希望文章能够帮你解决 html5教程-小小小tip: 按钮文字无缝变菊花 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小小小tip: 按钮文字无缝变菊花的详细内容...