大家好！
今天我們要實作網頁完全載入前的載入游泳圈！
我們進入今天的主題吧！
#loader {
width: 10em;
height: 10em;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 1;
}
#loader {
background-color: #142d46;
border-radius: 50%;
overflow: hidden;
animation: rotating 1s linear infinite;
}
#loader::before {
content: '';
display: block;
width: 7.5%;
height: 7.5%;
border-radius: 50%;
background: #00fafa;
margin: auto;
}
#loader::after {
content: '';
display: block;
width: 85%;
height: 85%;
background-color: #19324b;
border-radius: 50%;
margin: auto;
box-shadow: -4.25em -4.625em 0em #00fafa,
-5.5em 0em 1.25em #00fafa,
-6.75em 4.625em 2.5em #00fafa;
}
body.loaded #loader {
opacity: 0;
transition: opacity 0.5s;
}
@keyframes rotating {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
(function () {
Felix(window).on('load', function () {
Felix('body')[0].classList.add('loaded');
});
})();
<body>
<div id="overlay"></div>
<div id="loader"></div>
</body>
差不多也到尾聲了。
如果對文章有任何疑問，也歡迎在下方提問和建議！
我是 Felix，我們明天再見！
iThome鐵人賽
看影片追技術