CSS3登錄特效是一種在網站登錄界面中使用戶體驗更好的技術，它可以增添許多動態交互元素，使頁面更加美觀和實用。

以下是一個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登錄特效包括了許多元素，比如動態效果、圓角效果、提交按鈕等，能夠增加頁面的互動性，使用戶感覺更加舒適和自在。