时间:2021-05-08
由于自己公司产品里头,有个按钮在点击之后,会有一两秒的等待时间(寄认证信),因此为了避免点击后一两秒的加载时间空窗,就做个loading动画来强化使用者体验,原本想说直接用张gif来解决,但又想借着这个机会练功,就使用了CSS的渐变效果来达成,没想到效果还满好的,而且不需要额外增加div之类的元素,单纯修改CSS和加上点击事件就完成了。
效果演示
先来看一下完成的效果。
实现过程
这个效果其实很容易,先来看一下原本的按钮长相,就只是个div套用CSS而已。
HTML:
<div class="btn">click me</div>CSS:
.btn{ position:relative; width:200px; height:30px; line-height:30px; text-align:center; border-radius:3px; background:#5ad; color:#fff; cursor:pointer;}长相就会是这样(就只是很简单的CSS):
那么要怎么在上面盖上动画呢?这时候就要利用CSS的伪元素,在上方盖上一个before伪元素,把动画放在这个伪元素内即可。
CSS:
.btn::before{ content:"loading"; position:absolute; width:200px; height:30px; line-height:30px; text-align:center; border-radius:3px; z-index:2; top:0; left:0; color:#fff; text-shadow:rgba(100,0,0,1) 0 0 3px; background:#c00;}套上before之后,就会发现原本的被覆盖了。
了解原理后,再来就是把before的背景改成动画,这里用到两个CSS3的技巧,第一个是渐变色的背景,第二个是动画,第一个渐变色比较复杂些,主要就是让渐变以45度的方式填充,内容是两种颜色互相搭配,但必须配合background-size,让渐变能够顺利地接在一起,这边通常是要调整最久的地方。
background:linear-gradient(45deg,#fc0 0%,#fc0 20%,#fa0 20%, #fa0 45%,#fc0 45%,#fc0 70%,#fa0 70%, #fa0 95%,#fc0 95%,#fc0 100%);background-size:30px 30px;background-position:0 0;从下图可以看到,如果没有一步步调整,出来的长相可能就会没接好,调整完成的就会接得很顺畅。
完成之后就是要套用CSS3的动画效果,让background-position改变,背景就会自动变化了。
animation:click 1s infinite linear; @keyframes click { 0%{ background-position:0 0; } 100%{ background-position:30px 0; }}到这边其实完成了百分之八十了,最后一步就是要加上点击的事件,这里我的作法是先把刚刚的伪元素用display:none隐藏起来,接着新增一个class名为click,当点击按钮的时候,按钮就会套用click的class,伪元素就会出现了,以下是完整的代码,不过有做了些简化,以及让点击2秒之后,按钮会恢复原样。
CSS:
.btn,.btn::before{ width:200px; height:30px; line-height:30px; text-align:center; border-radius:3px;}.btn{ position:relative; background:#5ad; color:#fff; cursor:pointer;}.btn::before{ content:"loading"; position:absolute; display:none; z-index:2; top:0; left:0; color:#fff; text-shadow:rgba(100,0,0,1) 0 0 3px; background:linear-gradient(45deg,#fc0 0%,#fc0 20%,#fa0 20%, #fa0 45%,#fc0 45%,#fc0 70%,#fa0 70%, #fa0 95%,#fc0 95%,#fc0 100%); background-size:30px 30px; background-position:0 0; animation:click 1s infinite linear;}.btn.click::before{ display:block;}@keyframes click { 0%{ background-position:0 0; } 100%{ background-position:30px 0; }}jquery:
$(function(){ var timer; $('.btn').on('click',function(){ $('.btn').addClass('click'); clearTimeout(timer); timer = setTimeout(function(){ $('.btn').removeClass('click'); },2000); });});以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
之前为大家分享很多纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非
只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果。这个题目用图表示如下:如果将题目换成“只用css实现每行
比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果。此例子用Javascript实现点击按钮后,倒计时60秒才能再次
今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图: 实现的代码。 html代码:XML/HTM
今天要给大家分享的是由css3实现的翻转360动画按钮。之前已为大家分享了好几款css3按钮,大家可以点击链接进去找一找适合自己的。哈哈。下面先为大家上效果