最近本人正在學習<a href="//m.sbmmt.com/wiki/1118.html" target="_blank">HTML5</a>
系列課程,這麼課程涵蓋的內容也是非常的多,雖然內容十分簡單容易理解,但是非常難以記憶,比如CSS3
的一些屬性。今天要介紹的 CSS3 Loading
動畫也是極客學院裡所介紹的內容,有興趣的同學也可以前去觀看視屏。
第一種載入動畫的效果,就是這麼一個圖在不停的轉啊轉,下面我們就來看看程式碼。
首先,我們先定義一下HTML
程式碼,為了方便這裡我只貼上核心程式碼
<p class="box"> <p class="loading"> <i></i> </p> </p>
p
下面我們使用了 i
標籤,不要問為什麼,你也可以換成p
標籤或其他任何標籤。下面就用CSS
對我們的Html
進行修飾
* { box-sizing: border-box; margin: 0; padding: 0; } .box { width: 100%; padding: 3%; } .loading { display: flex; width: 30%; height: 250px; margin: 50px auto; border: 1px solid #699; justify-content: center; align-items: center; }
這裡解釋一下,margin: 50px auto;
這一行,將上下外邊距設定為50px
, 左右設定為auto
,這樣可以達到將我們的元素水平置中的目的。
還有這裡的 box-sizing: border-box
是什麼意思呢?我們將寬度設定為了父元素的 30%
,而我們又設定了邊框,那這個邊框佔據的大小算不算在目前元素的寬度中呢?這裡我們設定的值就是說明,加上邊框佔據的大小,目前元素佔父元素的 30%。
display,align-items,justify-content
這三個屬性是為了將i
標籤中的內容放置在p
的中部。首先利用display
屬性將p
設定成彈性盒子元素,然後利用align-items
設定元素在縱軸上置中,justify-content
設定元素在橫軸上居中。注意居中效果必須在這三種元素同時存在時才有效,因為後兩個屬性是依賴第一個屬性的。
.loading i { width: 35px; height: 35px; position: relative; display: block; border-radius: 50%; background: linear-gradient(transparent 0%, transparent 50%, #699 50%, #699 100%); -webkit-animation: loading 1s linear 0s infinite; }
看看background
屬性,其中設定了線性漸變效果,其中的參數也是我剛接觸不能夠理解的,不明白為什麼要這麼寫,其實可以這麼理解,從0%
到70%
設定成透明,從70%
到100%
設定成#699
,這樣我們就看到上述圖片中圖像了。
-webkit-animation
屬性就是為目前元素指定了一個動畫,第一個參數是動畫的名稱,也即loading
,該動畫是需要我們自己去定義的,具體定義下面再介紹。第二個參數是動畫持續的時長,第三個參數是動畫的速度曲線,第四個參數是動畫延遲時間,第五個參數是動畫播放的次數。下面看看我們自己定義的動畫
@-webkit-keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
十分容易理解,就是在動畫的不同階段進行元素的旋轉。值得注意的是,這種定義方式只能在Chrome
和Safari
瀏覽器中能看到動畫效果,那麼如果我們想在火狐瀏覽器中也顯示動畫效果,那我們需要這麼定義。
@-moz-keyframes loading-moz{ from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
引用的時候-moz-animation: loading-moz 1s linear 0s infinite;
幾乎是相同的,只不過換個頭部而已(至於在其他瀏覽器中怎麼定義,自己去試試看)。
這個動畫的效果就是五個條紋像波浪一樣擺動。下面就來書寫這麼一個效果。首先是HTML
,毫無懸念,十分簡單的佈局
<p class="box"> <p class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </p> </p>
其實這個效果幾乎所有的CSS
程式碼都是和上面一致的,來看看
* { box-sizing: border-box; margin: 0; padding: 0; } .box { width: 100%; padding: 3%; } .loading { display: flex; width: 30%; height: 250px; margin: 50px auto; border: 1px solid #699; justify-content: center; align-items: center; } .loading i { position: relative; width: 6px; height: 32px; margin-right: 6px; border-radius: 3px; background-color: #699; }
這裡唯一多出來的一行程式碼就是.loader i
中的margin-right
屬性,為什麼會多這麼一行呢?因為我們有 5 個 i
標籤,如果沒有這行屬性設定,那麼所有的標籤就回重疊在一起了。接下來就是動畫效果的設定了.
@-webkit-keyframes loading { 0% { transform: scaleY(1); } 50% { transform: scaleY(.5); } 100% { transform: scaleY(1); } } .loading i:first-child { -webkit-animation: loading 1s linear .1s infinite; } .loading i:nth-child(2) { -webkit-animation: loading 1s linear .2s infinite; } .loading i:nth-child(3) { -webkit-animation: loading 1s linear .3s infinite; } .loading i:nth-child(4) { -webkit-animation: loading 1s linear .4s infinite; } .loading i:last-child { -webkit-animation: loading 1s linear .5s infinite; }
可见我们设置的动画效果就是在 50%
的时候,将元素沿着 Y
轴进行缩放。然后我们对每一个i
标签进行了动画设定,不同的是每一个标签中的动画延迟执行时间不同,这样就可以达到波浪的效果,还有一点值得注意的是,我们发现我们指定的 动画速度曲线不同了,其实这个地方我们有必要了解一下所有可能的取值,如下
linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始,然后加快,在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。
这次要做的效果是动态转圈加载的效果,下面来看看如何实现这里的 HTML
代码和以上两个可能有点差别,这里多了一个 p
标签,目的是让画出的图形能够居中。
<p class="box"> <p class="loader"> <p class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </p> </p> </p>
看看 CSS
代码
.box { width: 100%; padding: 3%; } .loader { width: 30%; height: 250px; margin: 10px auto; border: 1px solid chocolate; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .loading { position: relative; } .loading i { display: block; width: 15px; height: 15px; background-color: #333333; border-radius: 50%; position: absolute; }
要理解为什么这些代码会画出如图所示的图形,那么我们必须要对 position
属性有一个透彻的了解,首先我们来看看我们用到的两个属性值是什么意思.
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
知道了意思,再来分析以上的代码,我们在loading
元素中定义了一个 position:relative
由于没有相应的内容将其撑起,所以这个时候loading
实际上为中心的一个点,然后我们将 i
标签设置为绝对定位,也就是围绕着这个点进行画圆即可。下面来看看画圆的代码
.loading i:nth-child(1) { top: 25px; left: 0px; } .loading i:nth-child(2) { top: 17px; left: 17px; } .loading i:nth-child(3) { top: 0px; left: 25px; } .loading i:nth-child(4) { top: -17px; left: 17px; } .loading i:nth-child(5) { top: -25px; left: 0px; } .loading i:nth-child(6) { top: -17px; left: -17px; } .loading i:nth-child(7) { top: 0px; left: -25px; } .loading i:nth-child(8) { top: 17px; left: -17px; }
看到这些代码,如果你不知道为什么这样能够画出一个圆,那么拿出草稿纸,画一个坐标轴,将上述代码中的 top
值作为 y
轴的值,将 left
的值作为 x
轴的值,就可以看到为什么这么书写代码了。好了,静态图像已经书写完毕,那么接下来就是定义动画的时间了
@-webkit-keyframes loading { 50%{ transform: scale(0.4); opacity: 0.3; } 100%{ transform: scale(1); opacity: 1; } }
opacity
属性用于设置元素的透明度。所以说我们的动画效果就是将元素缩小为 0.4 倍并且将透明度设置成 0.3。然后为每个 i
标签指定动画效果,从上到下依次为
-webkit-animation: loading 1s ease 0s infinite; -webkit-animation: loading 1s ease 0.12s infinite; -webkit-animation: loading 1s ease 0.24s infinite; -webkit-animation: loading 1s ease 0.36s infinite; -webkit-animation: loading 1s ease 0.48s infinite; -webkit-animation: loading 1s ease 0.60s infinite; -webkit-animation: loading 1s ease 0.72s infinite; -webkit-animation: loading 1s ease 0.84s infinite;
这个时候如果运行,你会发现好像是逆时针旋转的,如果想改成顺时针旋转,可以将延迟时间前面都加上负号。好了,今天先介绍这三种加载效果,如果书写有错误,欢迎反馈交流。
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
以上是分享CSS3中3個Loading 設計的實例代碼(一)的詳細內容。更多資訊請關注PHP中文網其他相關文章!