html实现验证码效果,CSS+JS验证码效果

HtmlCssJs

验证码

5c1q

body,html {

height:100%;

display:flex;

justify-content:center;

align-items:center;

background:rgb(

131,247,131)

}

main {

width:300px;

height:150px;

/* 定义边框大小 样式，此处为配合下面的边框渐变效果所以不加颜色 */

border:0px solid;

/* 定义边框渐变样式 */

border-image:linear-gradient(

-45deg,white 50%,greenyellow 50%,greenyellow 100%)

30 30;

display:flex;

align-items:center;

justify-content:center;

/* 定义标签边框属性 */

box-sizing:border-box;

transition:0.5s;

}

main:hover {

border:25px solid;

border-image:linear-gradient(

-45deg,white 50%,greenyellow 50%,greenyellow 100%)

30 30;

}

#ma {

width:250px;

height:100px;

/* background:red;*/

position:relative;

}

section {

width:150px;

height:100px;

background:white;

position:absolute;

left:50px;

z-index:100;

font-size:25px;

font-weight:bold;

text-align:center;

line-height:100px;

/* 设置字符之间有0.2em的空隙间隔 */

letter-spacing:0.2em;

cursor:pointer;

/* 定义标签背景渐变 */

background:linear-gradient(

-45deg,white 50%,greenyellow 50%,greenyellow 100%)

color:rgb(

170,170,167)

transition:0.5s;

animation:dong 0.1s linear infinite alternate;

}

@keyframes dong {

0% {

transform:translateX(

-10px)

}

50% {

transform:translateX(

0px)

}

100% {

transform:translateX(

10px)

}

}main:hover section {

opacity:0;

z-index:87;

transform:scale(

1.5)

animation-play-state:paused;

}

.ma {

width:150px;

height:100px;

background:white;

position:absolute;

left:50px;

z-index:99;

/* 设置过渡的返回时间 */

transition-duration:0.5s;

text-align:center;

line-height:100px;

font-size:35px;

letter-spacing:0.2em;

cursor:default;

opacity:0;

color:transparent;

/* 定义字符内的字母都是大写 */

text-transform:uppercase;

font-family:-apple-system,BlinkMacSystemFont,'

Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'

Open Sans','

Helvetica Neue',sans-serif;

}

main:hover .ma {

transition:0.7s ease-in-out;

left:0;

opacity:1;

color:rgb(

85,84,84)

}

#refresh {

width:100px;

height:100px;

position:absolute;

right:50px;

z-index:88;

transition-duration:0.5s;

border:18px solid transparent;

background:greenyellow;

font-size:25px;

color:white;

cursor:pointer;

box-sizing:border-box;

opacity:0;

}

#refresh:hover {

border:0px solid white;

}

main:hover #refresh {

transition:0.7s ease-in-out;

right:0;

opacity:1;

}

var refresh = document.getElementById('refresh');

var ma = document.getElementsByClassName('ma')[0];

// 定义一个包含数字和26个字母的数组

var arr = ['1', 'a', '2', 'b', '3', 'c', '4', 'd', '5', 'e', '6', 'f', '7', 'g', '8', 'h', '9', 'i', '0', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

//创建一个能够生成随机数的方法

function f1() {

// 定义四个不同的随机数

var num1 = Math.floor(Math.random() * 36);

var num2 = Math.floor(Math.random() * 36);

var num3 = Math.floor(Math.random() * 36);

var num4 = Math.floor(Math.random() * 36);

//把生成的四个随机数连到一起

var random = arr[num1] + arr[num2] + arr[num3] + arr[num4];

//把生成的随机数字符替换到 .ma 的标签内

ma.innerHTML = random;

}

//调用方法，生成随机数，替换掉之前写好的 5c1q 字符

f1();

// 通过点击刷新按钮调用 random() 方法

refresh.onclick = function random() {

// 每点击一次，调用一次 f1()方法，即生成一个随机数

f1();

}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3