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; }
鼠标经过,验证码滑开,点击刷新,再次生成随机验证码