CSS是一種用于控制網頁布局和樣式的語言，在網頁制作中起著非常重要的作用。而載入CSS文件的方式也可以通過動態效果來呈現，讓網頁的視覺效果更加生動。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS動態載入效果</title>
<style>
/* 定義載入CSS時的動畫效果 */
@keyframes loading {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 定義載入CSS時的遮罩層 */
.loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
animation: loading 1s infinite linear;
}
/* 定義載入CSS時的提示信息 */
.loading-text {
font-size: 32px;
color: #333;
margin-left: 10px;
}
/* 根據加載狀態顯示或隱藏遮罩層 */
#loading-wrapper.loaded .loading-mask {
display: none;
}
</style>
<script>
// 動態載入CSS文件
var css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'style.css';
document.head.appendChild(css);
</script>
</head>
<body>
<div id="loading-wrapper">
<div class="loading-mask"></div>
<p class="loading-text">正在加載CSS文件，請稍后...</p>
</div>
<div class="content">
<p>這是CSS動態載入效果的演示頁面。</p>
<p>CSS是一種用于控制網頁布局和樣式的語言，在網頁制作中起著非常重要的作用。而載入CSS文件的方式也可以通過動態效果來呈現，讓網頁的視覺效果更加生動。</p>
</div>
</body>
</html>以上是一個簡單的CSS動態載入效果的實現代碼。當網頁加載時，會顯示一個遮罩層和提示信息，表示正在加載CSS文件。當CSS文件加載完成后，遮罩層就會自動消失，同時網頁的樣式也得到了應用。
總之，動態效果是增強用戶體驗的好方法，能夠提升網頁的視覺吸引力和交互性。在實際開發中，我們可以根據需求自由發揮，加入各種精彩的動畫效果，讓網頁更加出眾和有趣。