CSS3應用範圍越來越廣,特別是在如今谷歌瀏覽器逐步替代IE的情況下
今天特意給大家推荐一款css3 loading加載效果
當然,他並不是純CSS3的,抱歉標題可能會有些歧義,但是偶爾的一點點的js也是可以忽略的啦
附件提供了28個不同的加載效果,你可以任選一種作為你的手機網頁端部分模組的載入效果,而不需要考慮相容性的問題
使用方法:
#1,將頭中的CSS樣式以及JS引入到你的網頁中
2,選擇一個你喜歡的載入效果,複製其中的HTML到你的網頁中即可
(注意的index.html底部的JS別漏掉了)
十七、效果十七
@keyframes leap_ball { 50% { transform: translateY(60px); }}
三個小球,橫縱方向上均居中,透過外邊距撐開小球之間的距離,從效果上看是左右兩邊的兩個小球在圍繞中間小球做環繞運動,那麼我們可以直接讓小球的父元素來旋轉,來達到兩邊小球的環繞效果(父元素旋轉的時候,因為圓形,所以中間小球看不出是在旋轉,並且中間的位置也不會改變,從視覺上看,中間小球沒有做任何變化)。
@keyframes wind_ball { 50% { transform: rotateZ(180deg); } 100% {transform: rotateZ(360deg); }}
#
總共五個小球,每個小球執行的動畫都一樣,只是每個小球的動畫延遲時間不同,而使小球的位置不同,將五個小球定位至同一個位置作為統一起點(這裡,我是將五個小球統一定位至最右邊){animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP { 80% {
right: 75%; //到达终点,开始返回起点 }}
@keyframes cool_ballS { 80% { //到达终点
top: 25%;width: 20px;height: 20px;
} 81% { //开始返回起点,长度变大,宽度变小,模拟移动产生的形变top: 0;width: 25px;height: 15px;
} 99% { //到达起点top: 0;width: 25px;height: 15px;
} 100% { //恢复初始width: 20px;height: 20px;
}
}
{animation: load_ball 1.6s linear infinite;}@keyframes load_ball { 50% { height: 0;width: 0; } 80% {height: 0;width: 0; }}
@keyframes triangle_ball { 16% { opacity: .6; } 33% {left: 100%;top: 100%;opacity: 1; } 50% {opacity: .6; } 66% {left: 0;top: 100%;opacity: 1; } 83% {opacity: .6; } 99% {top: 0;left: 50%;opacity: 1; }}
.gear_ball { height: 60px; width: 60px; border-radius: 50%; display: inline-block; border: 4px #fff solid; position: relative; }.gear_ball:after { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; top: -8px; left: -8px; border: 8px #fff dashed; }
以上是css3 loading載入圖文實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!