loading動畫特效小結(jié)
更新時間：2017年01月22日 15:57:43 作者：756642763
本篇文章主要分享了javascript實現(xiàn)loading動畫特效的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
話不多說，請看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lodading動畫效果上</title>
<link rel="stylesheet" href="style.css"/>
<style>
.box{
width: 100%;
padding:3%;
box-sizing: border-box;
overflow: hidden;
}
.box .loader{
width: 30%;
float: left;
height: 200px;
margin-right: 3%;
border:1px #ccc solid;
box-sizing: border-box;
display: flex;
align-content: center;
justify-content: center;
position: relative;
}
.box .loading {
position: absolute;
top: 50px;
}
@-webkit-keyframes loading-1{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
.demo-1 .loading{
width: 35px;
height: 35px;
position: relative;
}
.demo-1 .loading i{
display: block;
width: 100%;
height: 100%;
border-radius:50%;
background: linear-gradient(transparent 0%, transparent 70%, #333 30% ,#333 100%);
-webkit-animation: loading-1 .6s linear 0s infinite;
}
@-webkit-keyframes loading-2{
0%{
transform: scaleY(1);
}
50%{
transform: scaleY(0.4);
}
100%{
transform: scaleY(1);
}
}
.demo-2 .loading i{
display: inline-block;
width: 4px;
height: 35px;
border-radius: 2px;
margin:0 2px;
background-color: #333;
}
.demo-2 .loading i:nth-child(1){
-webkit-animation:loading-2 1s ease-in .1s infinite;
}
.demo-2 .loading i:nth-child(2){
-webkit-animation:loading-2 1s ease-in .2s infinite;
}
.demo-2 .loading i:nth-child(3){
-webkit-animation:loading-2 1s ease-in .3s infinite;
}
.demo-2 .loading i:nth-child(4){
-webkit-animation:loading-2 1s ease-in .4s infinite;
}
.demo-2 .loading i:nth-child(5){
-webkit-animation:loading-2 1s ease-in .5s infinite;
}
.demo-3 .loading{
position: relative;
}
.demo-3 .loading i{
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #333;
position: absolute;
}
.demo-3 .loading i:nth-child(1){
top: 25px;
left: 0;
-webkit-animation:loading-3 1s ease 0s infinite;
}
.demo-3 .loading i:nth-child(2){
top: 17px;
left: 17px;
-webkit-animation:loading-3 1s ease -0.12s infinite;
}
.demo-3 .loading i:nth-child(3){
top: 0px;
left: 25px;
-webkit-animation:loading-3 1s ease -0.24s infinite;
}
.demo-3 .loading i:nth-child(4){
top: -17px;
left: 17px;
-webkit-animation:loading-3 1s ease -0.36s infinite;
}
.demo-3 .loading i:nth-child(5){
top: -25px;
left: 0;
-webkit-animation:loading-3 1s ease -0.48s infinite;
}
.demo-3 .loading i:nth-child(6){
top: -17px;
left: -17px;
-webkit-animation:loading-3 1s ease -0.6s infinite;
}
.demo-3 .loading i:nth-child(7){
top: 0px;
left: -25px;
-webkit-animation:loading-3 1s ease -0.72s infinite;
}
.demo-3 .loading i:nth-child(8){
top: 17px;
left: -17px;
-webkit-animation:loading-3 1s ease -0.84s infinite;
}
@-webkit-keyframes loading-3{
50%{
transform: scale(0.4);
opacity: .3
}
100%{
transform: scale(1);
opacity: 1
}
}
@-webkit-keyframes loading-4{
0%{
transform: scale(0);
opacity: 0;
}
1%{
opacity: 1;
}
100%{
transform: scale(1);
opacity: 0;
}
}
.demo-4 .loading i:nth-child(1){
-webkit-animation:loading-4 1s linear 0s infinite;
}
.demo-4 .loading i:nth-child(2){
-webkit-animation:loading-4 1s linear 0.2s infinite;
}
.demo-4 .loading i:nth-child(3){
-webkit-animation:loading-4 1s linear 0.4s infinite;
}
.demo-4 .loading{
width: 60px;
height: 60px;
position: relative;
}
.demo-4 .loading i{
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #333;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.demo-5 .loading{
width: 40px;
height: 40px;
position: relative;
}
.demo-5 .loading i{
display: block;
border:2px solid #333;
border-color: transparent #333;
border-radius: 50%;
position: absolute;
}
.demo-5 .loading i:first-child{
width: 35px;
height: 35px;
top:0px;
left: 0px;
-webkit-animation:loading-5 1s ease-in-out 0s infinite;
}
.demo-5 .loading i:last-child{
width: 15px;
height: 15px;
top:10px;
left: 10px;
-webkit-animation:loading-5 1s ease-in-out 0.5s infinite reverse;
}
@-webkit-keyframes loading-5{
0%{
transform: rotate(0deg) scale(1);
}
50%{
transform: rotate(180deg) scale(0.6);
}
100%{
transform: rotate(360deg) scale(1);
}
}
.demo-6 .loading{
width: 80px;
height: 20px;
position: relative;
}
.demo-6 .loading i{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
margin-right: 10px;
position: absolute;
}
@-webkit-keyframes loading-6{
0%{
left: 100px;
top: 0;
}
80%{
left: 0;
top: 0;
}
85%{
left: 0;
top: -20px;
width: 20px;
height: 20px;
}
90%{
width: 40px;
height: 20px;
}
95%{
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100%{
left: 100px;
top: 0;
}
}
.demo-6 .loading i:nth-child(1){
-webkit-animation:loading-6 2s linear 0s infinite;
}
.demo-6 .loading i:nth-child(2){
-webkit-animation:loading-6 2s linear -0.4s infinite;
}
.demo-6 .loading i:nth-child(3){
-webkit-animation:loading-6 2s linear -0.8s infinite;
}
.demo-6 .loading i:nth-child(4){
-webkit-animation:loading-6 2s linear -1.2s infinite;
}
.demo-6 .loading i:nth-child(5){
-webkit-animation:loading-6 2s linear -1.6s infinite;
}
.demo-7 .loading i {
background-color: #777;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
width: 5px;
height: 15px;
}
.demo-7 .loading-1 {
top: 20px;
left: 0;
-webkit-animation: loading 1.2s 0.12s infinite ease-in-out;
-moz-animation: loading 1.2s 0.12s infinite ease-in-out;
-ms-animation: loading 1.2s 0.12s infinite ease-in-out;
-o-animation: loading 1.2s 0.12s infinite ease-in-out;
animation: loading 1.2s 0.12s infinite ease-in-out;
}
.demo-7 .loading-2 {
top: 13.63636px;
left: 13.63636px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: loading 1.2s 0.24s infinite ease-in-out;
-moz-animation: loading 1.2s 0.24s infinite ease-in-out;
-ms-animation: loading 1.2s 0.24s infinite ease-in-out;
-o-animation: loading 1.2s 0.24s infinite ease-in-out;
animation: loading 1.2s 0.24s infinite ease-in-out;
}
.demo-7 .loading-3 {
top: 0;
left: 20px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: loading 1.2s 0.36s infinite ease-in-out;
-moz-animation: loading 1.2s 0.36s infinite ease-in-out;
-ms-animation: loading 1.2s 0.36s infinite ease-in-out;
-o-animation: loading 1.2s 0.36s infinite ease-in-out;
animation: loading 1.2s 0.36s infinite ease-in-out;
}
.demo-7 .loading-4 {
top: -13.63636px;
left: 13.63636px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: loading 1.2s 0.48s infinite ease-in-out;
-moz-animation: loading 1.2s 0.48s infinite ease-in-out;
-ms-animation: loading 1.2s 0.48s infinite ease-in-out;
-o-animation: loading 1.2s 0.48s infinite ease-in-out;
animation: loading 1.2s 0.48s infinite ease-in-out;
}
.demo-7 .loading-5 {
top: -20px;
left: 0;
-webkit-animation: loading 1.2s 0.6s infinite ease-in-out;
-moz-animation: loading 1.2s 0.6s infinite ease-in-out;
-ms-animation: loading 1.2s 0.6s infinite ease-in-out;
-o-animation: loading 1.2s 0.6s infinite ease-in-out;
animation: loading 1.2s 0.6s infinite ease-in-out;
}
.demo-7 .loading-6 {
top: -13.63636px;
left: -13.63636px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: loading 1.2s 0.72s infinite ease-in-out;
-moz-animation: loading 1.2s 0.72s infinite ease-in-out;
-ms-animation: loading 1.2s 0.72s infinite ease-in-out;
-o-animation: loading 1.2s 0.72s infinite ease-in-out;
animation: loading 1.2s 0.72s infinite ease-in-out;
}
.demo-7 .loading-7 {
top: 0;
left: -20px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: loading 1.2s 0.84s infinite ease-in-out;
-moz-animation: loading 1.2s 0.84s infinite ease-in-out;
-ms-animation: loading 1.2s 0.84s infinite ease-in-out;
-o-animation: loading 1.2s 0.84s infinite ease-in-out;
animation: loading 1.2s 0.84s infinite ease-in-out;
}
.demo-7 .loading-8 {
top: 13.63636px;
left: -13.63636px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: loading 1.2s 0.96s infinite ease-in-out;
-moz-animation: loading 1.2s 0.96s infinite ease-in-out;
-ms-animation: loading 1.2s 0.96s infinite ease-in-out;
-o-animation: loading 1.2s 0.96s infinite ease-in-out;
animation: loading 1.2s 0.96s infinite ease-in-out;
}
@-webkit-keyframes loading {
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
@-moz-keyframes loading {
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
@-ms-keyframes loading {
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
@-o-keyframes loading {
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
@keyframes loading {
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box">
<div class="loader demo-1">
<div class="loading">
<i></i>
</div>
</div>
<div class="loader demo-2">
<div class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader demo-3">
<div class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader demo-4">
<div class="loading">
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader demo-5">
<div class="loading">
<i></i>
<i></i>
</div>
</div>
<div class="loader demo-6">
<div class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader demo-7">
<div class="loading">
<i class="loading-1"></i>
<i class="loading-2"></i>
<i class="loading-3"></i>
<i class="loading-4"></i>
<i class="loading-5"></i>
<i class="loading-6"></i>
<i class="loading-7"></i>
<i class="loading-8"></i>
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
- iOS動畫教你編寫Slack的Loading動畫進(jìn)階篇
- 一步步教你寫Slack的Loading動畫
- Android自定義加載loading view動畫組件
- Android實現(xiàn)創(chuàng)意LoadingView動畫效果
- 一看就喜歡的loading動畫效果Android分析實現(xiàn)
- jQuery實現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動畫
- 三款A(yù)ndroid炫酷Loading動畫組件推薦
- Winform圓形環(huán)繞的Loading動畫實現(xiàn)代碼
- javascript制作loading動畫效果 loading效果
- javascript 通用loading動畫效果實例代碼
相關(guān)文章
這篇文章主要介紹了原生js實現(xiàn)autocomplete插件的相關(guān)資料,需要的朋友可以參考下2016-04-04
今天小編就為大家分享一篇利用layer實現(xiàn)表單完美驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的遍歷算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的遍歷算法,簡單介紹了javascript實現(xiàn)數(shù)據(jù)結(jié)構(gòu)中二叉樹的中序遍歷、先序遍歷及后序遍歷方法與相關(guān)使用技巧,需要的朋友可以參考下2017-04-04
js判斷當(dāng)頁面無法回退時關(guān)閉網(wǎng)頁否則就history.go(-1)
當(dāng)頁面沒有前驅(qū)歷史記錄時，點擊返回按鈕時直接關(guān)閉頁面，否則就退回到前一頁2014-08-08
JS中數(shù)組與對象相互轉(zhuǎn)換的實現(xiàn)方式
這篇文章主要介紹了JS中數(shù)組與對象相互轉(zhuǎn)換的實現(xiàn)方式，文章通過代碼示例講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
JS使用for循環(huán)遍歷Table的所有單元格內(nèi)容
JS遍歷Table的所有單元格內(nèi)容思路是遍歷Table的所有Row，遍歷Row中的每一列，獲取Table中單元格的內(nèi)容2014-08-08
js+html5實現(xiàn)canvas繪制橢圓形圖案的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制橢圓形圖案的方法,涉及html5圖形繪制的基礎(chǔ)技巧,感興趣的朋友可以參考一下2016-05-05
本文給大家分享一段js代碼實現(xiàn)自動切換圖片的代碼，代碼非常簡單，應(yīng)用領(lǐng)域非常廣泛，感興趣的朋友一起看看吧2016-10-10
javascript 刪除select中的所有option的實例
這篇文章主要介紹了javascript 刪除select中的所有option的實例的相關(guān)資料,希望通過本文能幫助到大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
解決window.history.back()返回上一頁有時候需要點擊多次問題
這篇文章主要介紹了解決window.history.back()返回上一頁有時候需要點擊多次問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03