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

.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是一個登錄框的容器，通過設(shè)置position:relative實現(xiàn)其子元素.loading（加載框）的絕對定位。

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

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