首頁 >web前端 >css教學 >CSS3如何實現頁面載入效果

CSS3如何實現頁面載入效果

清浅原創: 2018-11-29 13:54:174298瀏覽

CSS3實作頁面載入效果的方法：先建立一個HTML範例檔案；然後在body中建立一個div；最後透過animation動畫和transform中的2D縮放轉換共同實作頁面載入效果即可。

CSS3如何實現頁面載入效果

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

對於頁面載入的動畫我們可以做成不同形狀的效果，今天要分享的案例是將動畫做成圓形的形狀來載入頁面，在使用動畫時要注意瀏覽器相容問題

知識點詳解

（1）animation：設定動畫屬性

animation-name ：設定需要綁定到選擇器的keyframe 名稱。本範例綁定的是load

animation-duration :完成動畫所需花費的時間，以秒或毫秒為單位。

animation-timing-function：動畫的速度曲線。

animation-delay：在動畫開始之前的延遲。

animation-iteration-count：動畫應該播放的次數。

animation-direction：是否應該輪流反向播放動畫。

範例：設定動畫名稱為load,完成動畫所需時間為1.4s，以低速開始和結束，無限循環播放

animation: load 1.4s infinite ease-in-out;

（2）animation-fill-mode 屬性

none ：不改變預設行為。

forwards：當動畫完成後，請保持最後一個屬性值（在最後一個關鍵影格中定義）。

backwards：在 animation-delay 所指定的一段時間內，在動畫顯示之前，套用開始屬性值（在第一個關鍵影格中定義）。

both：向前和向後填滿模式都被應用。

（3）transform ：scale(x,y) 2D 縮放轉換。

完整程式碼
##

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.load {
  margin:300px auto;
  width: 150px;
  text-align: center;
}
.load div{
  width: 30px;
  height: 30px;
  background-color:rgb(118,224,250);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: load 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;

}
.load .circle1 {
  -webkit-animation-delay: -0.32s;
}
.load .circle2 {
  -webkit-animation-delay: -0.16s;
}
@-webkit-keyframes load {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
</style>
</head>
<body>
<div class="load">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</body>
</html>

【建議課程：CSS3教學】

效果圖

CSS3如何實現頁面載入效果

動態效果圖

CSS3如何實現頁面載入效果

總結：以上就是這篇文章的全部內容了，透過這篇文章的內容希望大家對CSS3動畫有一定的了解，可以做出自己喜歡的頁面載入樣式。

以上是CSS3如何實現頁面載入效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css3 html count 循环 function 选择器 transform animation

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css中focus選擇器有什麼用下一篇：css中focus選擇器有什麼用

看更多