以下是一个CSS3登录特效的演示代码：
/*添加动态效果*/
@keyframes click-to-open {
0% {
width: 0%;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
/*增加圆角效果*/
input[type="text"], input[type="password"]{
border-radius: 20px;
padding: 10px;
font-size: 16px;
}
/* 设定提交按钮*/
button{
border: none;
background-color: #1abc9c;
color: white;
padding: 10px 20px;
border-radius: 20px;
font-size: 16px;
}
/*设置登录表单*/
.form-login{
width: 400px;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
padding: 40px;
box-shadow: 0px 4px 10px #0000001f;
}
/*增加点击效果*/
.click-to-open{
position: relative;
overflow: hidden;
display: inline-block;
}
.click-to-open::before{
content: "";
width: 100%;
height: 100%;
background-color: #1abc9c;
position: absolute;
left: 0;
top: 0;
transform: translateX(-100%);
transition: transform 0.5s ease-in-out;
}
.click-to-open:hover::before{
transform: translateX(0%);
}
/*定义登录表单中的元素*/
.form-login label{
font-size: 18px;
display: block;
margin-bottom: 20px;
}
.form-login input[type="text"],
.form-login input[type="password"]{
width: 100%;
margin-bottom: 20px;
}
.form-login button{
margin-top: 20px;
cursor: pointer;
}
/*添加HTML代码*/登录
这个CSS3登录特效包括了许多元素，比如动态效果、圆角效果、提交按钮等，能够增加页面的互动性，使用户感觉更加舒适和自在。