CSS實現創意的頁面載入（loading）動畫效果
- yulia原創
- 2018-10-20 10:48:383629瀏覽
小朋友在瀏覽網站時有沒有遇到頁面「loading中，請稍後」的情況，身為前端工程師，你會用CSS製作頁面載入（loading）動畫效果嗎？這篇文章跟大家分享一個創意十足的頁面載入（loading）動畫程式碼，有一定的參考價值，有興趣的朋友可以看看。
製作一個創意十足的頁面載入（loading）動畫需要用到很多CSS中的屬性，例如：animation動畫，transform屬性等等，如有不清楚的小夥伴可以參考PHP中文網的相關文章，或訪問CSS影片教學。
實例描述：用div製作一個富有創意的正方形loading頁面效果，在加載過程中，正方形沿著Y軸翻轉，又沿X軸翻轉，具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.spinner {
width: 60px;
height: 60px;
background-color: #67CF22;
margin: 100px auto;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>效果如圖所示：
以上給大家分享了一個創意十足的正方形載入（loading）頁面效果程式碼，比較簡單，初學者可以自己動手實踐，看看能不能實現頁面載入的動畫效果，希望這篇文章對你有幫助！
【相關教學推薦】
1. CSS3影片教學
2. HTML影片教學
#3. bootstrap教程
以上是CSS實現創意的頁面載入（loading）動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn