html验证码css,css+js验证码(原创)

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;

}