jquery实现文字依次点击验证码效果代码-html代码-BFW代码库

代码语言：html

所属分类：验证

代码描述：jquery实现文字依次点击验证码效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
        background-color: #1E1E1E;	/* background-size: 100%; */
    }
    
    
    #box{
    	width: 400px;
    	height: 400px;
    	margin: 50px auto 0;
    	border: #00FFFF solid 2px;
    	background-repeat: no-repeat;
    	background-size: 100%;
    	position: relative;
    	transition: all 2s; 
    	border-radius: 10px;
    }
    
    #box .fl{
    	
    	width: 200px;
    	height: 200px;
    	position: absolute;
    	
    }
    
    #box .radio{
    	background-color: #1abd6c;
    	    color: #fff;
    	    z-index: 9999;
    	    width: 30px;
    	    height: 30px;
    	    text-align: center;
    	    line-height: 30px;
    	    border-radius: 50%;
    	    position: absolute;
    	   z-index: 10;
    	   line-height: 30px;
    	   color: white;
    }
    
    #box span{
    	font-size: 40px;
    	position: absolute;
    	z-index: 4;
    	color: blueviolet;
    	font-weight: bold;
    	transition: all 2s; 
    }
    
    #box span:hover{
    	font-family: 'Audiowide';
    	 text-align: center;
    	 color: #E0FFFF;
    	 font-size: 50px;
    	transition: all 1.5s ease;
    	color: #fff;
    	animation: Glow 1.5s ease infinite alternate;
    	margin-bottom: 30px;
    }
    
    @keyframes Glow {
    		    from {
    		        text-shadow: 0 0 10px #fff,
    		                     0 0 20px #fff,
    		                     0 0 30px #fff,
    		                     0 0 40px #C71585,
    		                     0 0 70px #C71585,
    		                     0 0 80px #C71585,
    		                     0 0 100px #C71585,
    		                     0 0 150px #C71585;
    							 
    				/* text-shadow: 0 0 10px red; */
    		    }
    		    to {
    		        text-shadow: 0 0 5px #fff,
    		                     0 0 10px #fff,
    		                     0 0 15px #fff,
    		                     0 0 20px #C71585,
    		                     0 0 35px #C71585,
    		                     0 0 40px #C71585,
    		                     0 0 50px #C71585,
    		                     0 0 75px #C71585;
    							 
    				/* text-shadow: 0 0 10px blue; */
    		    }
    		}
    
    #minbox{
    	width: 400px;
    	height: 40px;
    	margin: 10px auto 0;
    	border: greenyellow solid 1px;
    	text-align: center;
    	font-size: 26px;
    	line-height: 40px;
    	color: #C71585;
    	font-weight: bold;
    	transition: all 2s; 
    	border-radius: 10px;
    	background-color: white;
    }
    
    #minbox span{
    	color: black;
    	transition: all 2s; 
    }
    
    .size{
    	color: #0480BE;
    	animation: Alow 1.5s ease infinite alternate;
    }
    
    @keyframes Alow {
    		    from {
    		        text-shadow: 0 0 10px #fff,
    		                     0 0 20px #fff,
    		                     0 0 30px #fff,
    		                     0 0 40px #00FA9A,
    		                     0 0 70px #00FA9A,
    		                     0 0 80px #00FA9A,
    		                     0 0 100px #00FA9A,
    		                     0 0 150px #00FA9A;
    							 
    				/* text-shadow: 0 0 10px red; */
    		    }
    		    to {
    		        text-shadow: 0 0 5px #fff,
    		                     0 0 10px #fff,
    		                     0 0 15px #fff,
    		                     0 0 20px #00FA9A,
    		                     0 0 35px #00FA9A,
    		                     0 0 40px #00FA9A,
    		                     0 0 50px #00FA9A,
    		                     0 0 75px #00FA9A;
    							 
    				/* text-shadow: 0 0 10px blue; */
    		    }
    		}
    		
    		.bg-blur {
    		            background-image: url("//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90");
    		            width: 100%;
    					height: 100%;
    		            /* background-position: center; */
    		           background-size: cover;
    		            /* -webkit-filter: blur(15px);
    		            -moz-filter: blur(15px);
    		            -o-filter: blur(15px);
    		            -ms-filter: blur(15px); */
    		            filter: blur(5px);
    		        }
    </style>

</head>

<body>
    <div class="checkBox">
        <div id="box">
            <div class="bg-blur"></div>
        </div>
        <div id="minbox"></div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        //随机词汇表
        var arr=["新春快乐","阖家快乐","恭贺新禧","万事如意","张灯结彩","恭喜发财","假期愉快","今晚吃鸡","初中资料","教育盘网","网课资源"];
        var dic = "一乙二十丁厂七卜人入八九几儿了力乃刀又三于干亏士工土才寸下大丈与万上小口巾山千乞川亿个勺久凡及夕丸么广亡门义之尸弓己已子卫也女飞刃习叉马乡丰王井开夫天无元专云扎艺木五支厅不太犬区历尤友匹车巨牙屯比互切瓦止少日中冈贝内水见午牛手毛气升长仁什片仆化仇币仍仅斤爪反介父从今凶分乏公仓月氏勿欠风丹匀乌凤勾文六方火为斗忆订计户认心尺引丑巴孔队办以允予劝双书幻玉刊示末未击打巧正扑扒功扔去甘世古节本术可丙左厉右石布龙平灭轧东卡北占业旧帅归且旦目叶甲申叮电号田由史只央兄叼叫另叨叹四生失禾丘付仗代仙们仪白仔他斥瓜乎丛令用甩印乐句匆册犯外处冬鸟务包饥主市立闪兰半汁汇头汉宁穴它讨写让礼训必议讯记永司尼民出辽奶奴加召皮边发孕圣对台矛纠母幼丝式刑动扛寺吉扣考托老执巩圾扩扫地扬场耳共芒亚芝朽朴机权过臣再协西压厌在有百存而页匠夸夺灰达列死成夹轨邪划迈毕至此贞师尘尖劣光当早吐吓虫曲团同吊吃因吸吗屿帆岁回岂刚则肉网年朱先丢舌竹迁乔伟传乒乓休伍伏优伐延件任伤价份华仰限妹姑姐姓始驾参艰线练组细驶织终驻驼绍经贯奏春帮珍玻毒型挂封帘实试郎诗肩房诚衬衫视话诞询该详建肃录.........完整代码请登录后点击上方下载按钮下载查看