国产在线视频在线,亚洲欧美另类动漫,国产无限制自拍

導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立...

網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因為文本中包含了所謂“超級鏈接”點。

實現(xiàn)頁面加載過程需要通過CSS3中的animation動畫以及transform屬性中的縮放兩個效果可以做出頁面加載的效果，接下來在文章中將為大家詳細(xì)介紹

【推薦課程：CSS3教程】

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

知識點詳解

（1）animation：設(shè)置動畫屬性

animation-name ：設(shè)置需要綁定到選擇器的 keyframe 名稱。本例綁定的是load

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

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

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

animation-iteration-count：動畫應(yīng)該播放的次數(shù)。

animation-direction：是否應(yīng)該輪流反向播放動畫。

例：設(shè)置動畫名為load,完成動畫所需時間為1.4s，以低速開始和結(jié)束，無限循環(huán)播放

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

（2）animation-fill-mode 屬性

none ：不改變默認(rèn)行為。

forwards：當(dāng)動畫完成后，保持最后一個屬性值（在最后一個關(guān)鍵幀中定義）。

backwards：在 animation-delay 所指定的一段時間內(nèi)，在動畫顯示之前，應(yīng)用開始屬性值（在第一個關(guān)鍵幀中定義）。

both：向前和向后填充模式都被應(yīng)用。

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

完整代碼

<!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>

效果圖

未標(biāo)題-1.jpg

動態(tài)效果圖

總結(jié)：以上就是本篇文章的全部內(nèi)容了，通過這篇文章的內(nèi)容希望大家對CSS3動畫有一定的了解，可以做出自己喜歡的頁面加載樣式。

以上就是CSS3如何實現(xiàn)頁面加載效果的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 網(wǎng)頁設(shè)計教程 > 詳細(xì)頁面

CSS3如何完成頁面加載效果

本類教程下載

系統(tǒng)下載排行