css+js实现提交按钮点击进度反馈提示效果代码
代码语言:html
所属分类:表单美化
代码描述:css+js实现提交按钮点击进度反馈提示效果代码
代码标签: css js 提交 按钮 点击 进度 反馈 提示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
font-family:'Roboto';
}
.super-container {
width:100vw;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
.container {
width:200px;
height:43px;
position:relative;
text-align:center;
border-radius:25px;
background-color:#D3E5FB;
background:linear-gradient( to left,#D3E5FB,#D3E5FB 50%,#4675a8 50%,#3c95fb );
background-position:90% 0;
background-size:200% 100%;
border:2px solid #3c95fb;
pointer-events:all;
transition:0.7s all;
}
.reset-background {
border-radius:25px;
background-color:#D3E5FB;
background:linear-gradient( to left,transparent,transparent 50%,#4675a8 50%,#3c95fb );
background-position:90% 0;
background-size:200% 100%;
}
.circle {
display:flex;
justify-content:center;
align-items:center;
position:absolute;
left:0%;
height:44px;
width:44px;
background-color:#3c95fb;
border-radius:50%;
box-shadow:1px 1px 10px grey;
transition:0.7s all;
}
.text {
height:100%;
display:flex;
justify-content:center;
align-items:center;
font-size:14px;
font-weight:500;
color:#3c95fb;
user-select:none;
}
.text-request {
color:#D3E5FB;
}
.request {
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0