CSS 飛舞線條加載中動畫效果 #web前端

天給大家?guī)砹怂膫€線條進行環(huán)繞的加載中的效果，我放大了給你們看看，但是你們可以看到，每個線條的旋轉(zhuǎn)動作是一個圓形。

下面是代碼區(qū)域，我使用的是vivo試圖容器，里面包含了第二個試圖容器，里面有五個vivo試圖容器，前面這四個代表著四根線條，線條下面是文字。主要的是css代碼區(qū)域，我使用的是開發(fā)工具是s plus x，是開發(fā)uniap的。

先給大家解釋一下代碼部分。

·首先是第一個vivo式圖容器，使用彈性布局集中對齊，頂部距離進行相反像素的設(shè)置。

·第二個又是圖中簽，也是進行絕對定位，集中對齊相對定位等。

·下面就是h三，文字是白色，大家可以看到知道。

·這是第一個線條，設(shè)置了一個寬度、高度、邊框、透明度、圓角、絕對定位。主要是第一根線條的動作是個動畫，進行了應(yīng)用旋轉(zhuǎn)動畫，無限循環(huán)。邊框顏色為了粉色，大家可以看到粉色，因為為什么這么細(xì)？大家可以看到因為在防木人狀態(tài)下設(shè)置了一個一的邊框，線條的寬度是一，所以是細(xì)的。

·第二個就是第一個線條動畫，它引用是哪個動畫？就是下面設(shè)置一個旋轉(zhuǎn)角度和結(jié)束的旋轉(zhuǎn)角度形成一個圓形，從五十到一百一，再從五十到四百七，大家可以看一下形成這么個動畫。

·下面第二根線條、第三根線條、第四根線條基本上都是一樣的動畫，所以大家只需要把第一根線條的寫法知道就行了。

·下面的其實位置的變化而已和顏色大家可以看到，其他地方基本上沒有太多的區(qū)別，就是美國旋轉(zhuǎn)的角度是不一樣的。第一個旋轉(zhuǎn)角度是四百七，第二個是三百八，然后是九十，然后是六百三，就這不一樣，價格方都是一樣的。

感興趣的同學(xué)可以找我嘮嗑進行獲取元代碼，進行二十四的編寫也可以，也可以自己去手動去學(xué)。

喜歡的可以點贊收藏一下，本期就講到這。

看看最終效果圖

最終效果

接下來一步步的實現(xiàn)它，完全不用javascript，動畫效果單純用css3實現(xiàn)完全沒問題

從第一個靜止的矩形開始

源碼

然后讓它動起來

源碼

其實就是不斷的拉長和縮短

依樣畫葫蘆

再添加4個矩形

此時它們看起來是這樣的，這不是我們想要的效果

因為沒有給它們分別指定不同的延遲時間，所以它們的步調(diào)是一致的。接下來分別給它們指定不同的延遲時間

animation-delay，可以指定負(fù)數(shù)，指定負(fù)數(shù)的意思是動畫立刻開始，但跳過指定秒數(shù)進入動畫,比如這里第一個指定的是-1.2s，也就是說動畫開始時從1.2秒處開始，前面的1.2秒跳過！

希望的效果出現(xiàn)了

當(dāng)然我們也可以不指定負(fù)數(shù)，看看效果如何

剛好相反

教程到這里就結(jié)束了，謝謝觀看，如果喜歡可以關(guān)注喲，火蛙以后還會寫更多好玩的教程

么是懶加載？

在Web開發(fā)中經(jīng)常會遇到一些性能問題，有很多原因就是因為一次性請求過多導(dǎo)致的，而懶加載是一種在不影響原有界面，當(dāng)界面需要展現(xiàn)給用戶才進行加載和請求，常見的就是圖片的加載，在很多電商頁面中最常見，通過懶加載的方式提升了頁面的性能，用戶體驗也會更好了。

為什么使用lozad.js

現(xiàn)有的延遲加載庫依賴窗體的滾動事件，或者使用定期計時器并調(diào)用在需要延遲加載的元素上getBoundingClientRect()。然而，這種方法非常緩慢，因為每次調(diào)用getBoundingClientRect()強制瀏覽器重新布局整個頁面而lozad.js不依賴這些，因此性能很好。

lozad.js介紹

Github地址

https://github.com/ApoorvSaxena/lozad.js

lozad.js是使用純JavaScript實現(xiàn)的不借助圖像或iframe的高性能且輕量級可配置延遲加載器，它的思想是觀察者模式

特點

純js實現(xiàn)
非常輕量，壓縮后只有1.04kb
零依賴
允許延遲加載動態(tài)添加的元素
支持圖片、iframe、視頻、音頻、背景圖片等
免費開源

最新版本在于有基礎(chǔ)上性能得到了極大地提升。

安裝使用

安裝

npm install --save lozad
//OR
yarn add lozad
//OR
bower install lozad

使用

// using ES6 模塊
import lozad from 'lozad'
// using CommonJS 模塊
var lozad = require('lozad')

或者直接引用cdn或本地js

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

舉例：

html：

<img class="lozad" data-src="image.png" />

js:

const observer = lozad(); // '.lozad'作為默認(rèn)類選擇器
observer.observe();

自己引入dom：

const el = document.querySelector('img');
const observer = lozad(el); 
document.querySelectorAll()
observer.observe();

自定義配置：

const observer = lozad('.lozad', {
 rootMargin: '10px 0px', 
 threshold: 0.1
});
observer.observe();

背景圖片：

<div class="lozad" data-background-image="image.png">
</div>

IFrame：

<iframe data-src="embed.html" class="lozad"></iframe>

更多使用實例參考Github，提供了圖片、背景圖等使用方式

瀏覽器支持

支持大多數(shù)瀏覽器，如果不支持需要引入polyfill

總結(jié)

提升Web頁面的性能方法多種多樣，懶加載就是其中一種，如果你追求極致的性能，不妨試一試lozadjs，期待對你有所幫助！

在線咨詢

上一篇：程序員浪漫起來沒文科生什么事：HTML制作表白愛心-無需編程基礎(chǔ)
下一篇：你不能錯過的創(chuàng)意CSS文字陰影效果第二彈

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商