CSS可以實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)效果，如正在登錄效果。以下是一個(gè)示例：

.login {
width: 300px;
height: 300px;
background-color: #fff;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}
.login form input[type="text"], .login form input[type="password"] {
display: block;
width: 100%;
padding: 15px;
font-size: 14px;
margin-bottom: 20px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.login form input[type="submit"] {
display: block;
width: 100%;
padding: 15px;
font-size: 16px;
background-color: #f00;
color: #fff;
border: none;
}
.login .loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
visibility: hidden;
}
.login .loading:before {
content: "";
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid #fff;
border-top-color: #f00;
animation: spin 1s linear infinite;
}
.login.loading .loading {
visibility: visible;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

以上代碼中，.login是一個(gè)登錄框的容器，通過(guò)設(shè)置position:relative實(shí)現(xiàn)其子元素.loading（加載框）的絕對(duì)定位。

在登錄時(shí)，通過(guò)JavaScript給.login元素添加.loading類，從而觸發(fā).loading的顯示效果。同時(shí)，使用visibility:hidden屬性隱藏.loading元素，這樣在沒(méi)有觸發(fā)顯示效果時(shí)，loading元素不會(huì)占用空間。

加載框的圖形效果使用CSS3動(dòng)畫(huà)實(shí)現(xiàn)，通過(guò)transform:rotate屬性實(shí)現(xiàn)旋轉(zhuǎn)效果。