色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css實現頁面加載效果

錢旭東1年前7瀏覽0評論

CSS可以實現各種酷炫的頁面加載效果,比如旋轉、淡入淡出、縮放等等。下面我們來看一些實現方法。

.loading{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.loading:after{
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
border: 3px solid #ccc;
border-top-color: #000;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin{
from{
transform: translate(-50%, -50%) rotate(0deg);
}
to{
transform: translate(-50%, -50%) rotate(360deg);
}
}

上面的代碼實現了一個加載頁面的效果,當頁面加載時,一個圓形的小球會在頁面中心旋轉。

另外,還可以使用CSS3的transition屬性實現一個簡單的淡入淡出效果。

.loading{
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.loading.active{
opacity: 1;
}

通過添加和刪除.active類名,實現頁面的淡入和淡出效果。

以上是兩種較為簡單的實現方式,實際上還有很多其他的方法可以實現頁面效果,需要根據不同情況選擇合適的方式。