实现点击按钮后的CSS加载效果

CSS：.btn{position:relative;宽度：200px；高度：30px；行高：30px；文本对齐：居中；边界半径：3px；背景：#5ad；颜色：#fff；cursor:pointer;}它看起来像这样（只是一个非常简单的CSS）：那么如何在上面放置动画呢？这时候就需要用到CSS伪元素，在上面覆盖一个before伪元素，把动画放在这个伪元素里面。CSS:.btn::before{内容：“正在加载”；位置：绝对；宽度：200px；高度：30px；行高：30px；文本对齐：居中；边界半径：3px；顶部：0；左：0；颜色：#fff；文本阴影：rgba（100,0,0,1）003px；background:#c00;}装上before后，会发现原来的被覆盖了。了解了原理之后，接下来就是将before的背景换成动画了。这里使用了两种CSS3技术。第一个是渐变色的背景，第二个是动画。第一种渐变色比较复杂，主要是让渐变以45度的方式填充。内容是两种颜色相互匹配，但是必须要和background-size匹配，这样渐变才能平滑衔接。这通常是需要调整时间最长的地方。背景：线性渐变（45deg，#fc00%，#fc020%，#fa020%，#fa045%，#fc045%，#fc070%，#fa070%，#fa095%，#fc095%,#fc0100%);background-size:30px30px;background-position:00;从下图可以看出，如果没有逐级调整，外观可能连接不正确，调整完成就会顺利进行。完成后，需要应用CSS3的动画效果，让background-position发生变化，背景会自动变化。动画：点击1s无限线性；@keyframesclick{0%{背景位置：00;}100%{背景位置：30px0;}}到这里其实已经完成了80%，最后一步是添加点击事件，我这里的方法是用display:none隐藏刚才的伪元素，然后添加一个名为click的类。当按钮被点击时，按钮会应用click的类，伪元素就会出现，下面是完整的代码，但是做了一些简化，2秒后按钮会恢复到原来的状态点击。CSS：.btn,.btn::before{width:200px;高度：30px；行高：30px；文本对齐：居中；border-radius:3px;}.btn{position:relative;背景：#5ad；颜色：#fff；光标：指针；}.btn::before{内容：“正在加载”；位置：绝对；显示：无；z-索引：2；顶部：0；左：0；颜色：#fff；文本阴影：rgba（100,0,0,1）003px；背景：线性渐变（45deg，#fc00%，#fc020%，#fa020%，#fa045%，#fc045%，#fc070%，#fa070%，#fa095%，#fc095%,#fc0100%);背景尺寸：30px30px；背景位置：00；动画：点击1s无限线性；}.btn.click::before{display:block;}@keyframesclick{0%{background-position:00;}100%{背景位置：30px0;}}jquery：$(function(){vartimer;$('.btn').on('click',function(){$('.btn').addClass('click');clearTimeout(timer);timer=setTimeout(function(){$('.btn').removeClass('click');},2000);});});