帮助中心

CSS+JS验证码效果

浏览：1256次- 评论：0次- 发布时间：2018-08-18

Html

Css

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;
}

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

jQuery调用版本：1.11.3