顯示加載動畫，點擊

Question

時，我有一個圖像按鈕：

<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png"> 

，我想點擊時顯示按鈕加載動畫（不是整個頁面）。

我試着用gif圖像，當點擊按鈕時，它顯示，但不完全按鈕。 然後我試着用CSS加載動畫，但我無法實現onload。這裏是一個CSS/HTML裝載代碼：

.windows8 { 
    position: relative; 
    width: 48px; 
    height:48px; 
    margin:auto; 
    } 

    .windows8 .wBall { 
    position: absolute; 
    width: 46px; 
    height: 46px; 
    opacity: 0; 
    transform: rotate(225deg); 
     -o-transform: rotate(225deg); 
     -ms-transform: rotate(225deg); 
     -webkit-transform: rotate(225deg); 
     -moz-transform: rotate(225deg); 
    animation: orbit 6.96s infinite; 
     -o-animation: orbit 6.96s infinite; 
     -ms-animation: orbit 6.96s infinite; 
     -webkit-animation: orbit 6.96s infinite; 
     -moz-animation: orbit 6.96s infinite; 
} 

.windows8 .wBall .wInnerBall{ 
    position: absolute; 
    width: 6px; 
    height: 6px; 
    background: rgb(0,0,0); 
    left:0px; 
    top:0px; 
    border-radius: 6px; 
} 

.windows8 #wBall_1 { 
    animation-delay: 1.52s; 
     -o-animation-delay: 1.52s; 
     -ms-animation-delay: 1.52s; 
     -webkit-animation-delay: 1.52s; 
     -moz-animation-delay: 1.52s; 
} 

.windows8 #wBall_2 { 
    animation-delay: 0.3s; 
     -o-animation-delay: 0.3s; 
     -ms-animation-delay: 0.3s; 
     -webkit-animation-delay: 0.3s; 
     -moz-animation-delay: 0.3s; 
} 

.windows8 #wBall_3 { 
    animation-delay: 0.61s; 
     -o-animation-delay: 0.61s; 
     -ms-animation-delay: 0.61s; 
     -webkit-animation-delay: 0.61s; 
     -moz-animation-delay: 0.61s; 
} 

.windows8 #wBall_4 { 
    animation-delay: 0.91s; 
     -o-animation-delay: 0.91s; 
     -ms-animation-delay: 0.91s; 
     -webkit-animation-delay: 0.91s; 
     -moz-animation-delay: 0.91s; 
} 

.windows8 #wBall_5 { 
    animation-delay: 1.22s; 
     -o-animation-delay: 1.22s; 
     -ms-animation-delay: 1.22s; 
     -webkit-animation-delay: 1.22s; 
     -moz-animation-delay: 1.22s; 
} 



@keyframes orbit { 
    0% { 
     opacity: 1; 
     z-index:99; 
     transform: rotate(180deg); 
     animation-timing-function: ease-out; 
    } 

    7% { 
     opacity: 1; 
     transform: rotate(300deg); 
     animation-timing-function: linear; 
     origin:0%; 
    } 

    30% { 
     opacity: 1; 
     transform:rotate(410deg); 
     animation-timing-function: ease-in-out; 
     origin:7%; 
    } 

    39% { 
     opacity: 1; 
     transform: rotate(645deg); 
     animation-timing-function: linear; 
     origin:30%; 
    } 

    70% { 
     opacity: 1; 
     transform: rotate(770deg); 
     animation-timing-function: ease-out; 
     origin:39%; 
    } 

    75% { 
     opacity: 1; 
     transform: rotate(900deg); 
     animation-timing-function: ease-out; 
     origin:70%; 
    } 

    76% { 
    opacity: 0; 
     transform:rotate(900deg); 
    } 

    100% { 
    opacity: 0; 
     transform: rotate(900deg); 
    } 
} 

@-o-keyframes orbit { 
    0% { 
     opacity: 1; 
     z-index:99; 
     -o-transform: rotate(180deg); 
     -o-animation-timing-function: ease-out; 
    } 

    7% { 
     opacity: 1; 
     -o-transform: rotate(300deg); 
     -o-animation-timing-function: linear; 
     -o-origin:0%; 
    } 

    30% { 
     opacity: 1; 
     -o-transform:rotate(410deg); 
     -o-animation-timing-function: ease-in-out; 
     -o-origin:7%; 
    } 

    39% { 
     opacity: 1; 
     -o-transform: rotate(645deg); 
     -o-animation-timing-function: linear; 
     -o-origin:30%; 
    } 

    70% { 
     opacity: 1; 
     -o-transform: rotate(770deg); 
     -o-animation-timing-function: ease-out; 
     -o-origin:39%; 
    } 

    75% { 
     opacity: 1; 
     -o-transform: rotate(900deg); 
     -o-animation-timing-function: ease-out; 
     -o-origin:70%; 
    } 

    76% { 
    opacity: 0; 
     -o-transform:rotate(900deg); 
    } 

    100% { 
    opacity: 0; 
     -o-transform: rotate(900deg); 
    } 
} 

@-ms-keyframes orbit { 
    0% { 
     opacity: 1; 
     z-index:99; 
     -ms-transform: rotate(180deg); 
     -ms-animation-timing-function: ease-out; 
    } 

    7% { 
     opacity: 1; 
     -ms-transform: rotate(300deg); 
     -ms-animation-timing-function: linear; 
     -ms-origin:0%; 
    } 

    30% { 
     opacity: 1; 
     -ms-transform:rotate(410deg); 
     -ms-animation-timing-function: ease-in-out; 
     -ms-origin:7%; 
    } 

    39% { 
     opacity: 1; 
     -ms-transform: rotate(645deg); 
     -ms-animation-timing-function: linear; 
     -ms-origin:30%; 
    } 

    70% { 
     opacity: 1; 
     -ms-transform: rotate(770deg); 
     -ms-animation-timing-function: ease-out; 
     -ms-origin:39%; 
    } 

    75% { 
     opacity: 1; 
     -ms-transform: rotate(900deg); 
     -ms-animation-timing-function: ease-out; 
     -ms-origin:70%; 
    } 

    76% { 
    opacity: 0; 
     -ms-transform:rotate(900deg); 
    } 

    100% { 
    opacity: 0; 
     -ms-transform: rotate(900deg); 
    } 
} 

    @-webkit-keyframes orbit { 
    0% { 
     opacity: 1; 
     z-index:99; 
     -webkit-transform: rotate(180deg); 
     -webkit-animation-timing-function: ease-out; 
    } 

    7% { 
     opacity: 1; 
     -webkit-transform: rotate(300deg); 
     -webkit-animation-timing-function: linear; 
     -webkit-origin:0%; 
    } 

    30% { 
     opacity: 1; 
     -webkit-transform:rotate(410deg); 
     -webkit-animation-timing-function: ease-in-out; 
     -webkit-origin:7%; 
    } 

    39% { 
     opacity: 1; 
     -webkit-transform: rotate(645deg); 
     -webkit-animation-timing-function: linear; 
     -webkit-origin:30%; 
    } 

    70% { 
     opacity: 1; 
     -webkit-transform: rotate(770deg); 
     -webkit-animation-timing-function: ease-out; 
     -webkit-origin:39%; 
    } 

    75% { 
     opacity: 1; 
     -webkit-transform: rotate(900deg); 
     -webkit-animation-timing-function: ease-out; 
     -webkit-origin:70%; 
    } 

    76% { 
    opacity: 0; 
     -webkit-transform:rotate(900deg); 
    } 

    100% { 
    opacity: 0; 
     -webkit-transform: rotate(900deg); 
    } 
} 

@-moz-keyframes orbit { 
    0% { 
     opacity: 1; 
     z-index:99; 
     -moz-transform: rotate(180deg); 
     -moz-animation-timing-function: ease-out; 
    } 

    7% { 
     opacity: 1; 
     -moz-transform: rotate(300deg); 
     -moz-animation-timing-function: linear; 
     -moz-origin:0%; 
    } 

    30% { 
     opacity: 1; 
     -moz-transform:rotate(410deg); 
     -moz-animation-timing-function: ease-in-out; 
     -moz-origin:7%; 
    } 

    39% { 
     opacity: 1; 
     -moz-transform: rotate(645deg); 
     -moz-animation-timing-function: linear; 
     -moz-origin:30%; 
    } 

    70% { 
     opacity: 1; 
     -moz-transform: rotate(770deg); 
     -moz-animation-timing-function: ease-out; 
     -moz-origin:39%; 
    } 

    75% { 
     opacity: 1; 
     -moz-transform: rotate(900deg); 
     -moz-animation-timing-function: ease-out; 
     -moz-origin:70%; 
    } 

    76% { 
    opacity: 0; 
     -moz-transform:rotate(900deg); 
    } 

    100% { 
    opacity: 0; 
     -moz-transform: rotate(900deg); 
    } 
} 

HTML

<div class="windows8"> 
<div class="wBall" id="wBall_1"> 
    <div class="wInnerBall"></div> 
</div> 
<div class="wBall" id="wBall_2"> 
    <div class="wInnerBall"></div> 
</div> 
<div class="wBall" id="wBall_3"> 
    <div class="wInnerBall"></div> 
</div> 
<div class="wBall" id="wBall_4"> 
    <div class="wInnerBall"></div> 
</div> 
<div class="wBall" id="wBall_5"> 
    <div class="wInnerBall"></div> 
</div> 

我想對圖像按鈕動畫。 任何動畫，不完全是這樣，但要在該圖像按鈕上。 需要幫助

Answer 1

要顯示重疊的元件，常用的方法是使用absolute（或fixed）的定位。要顯示裝載機，放在你的img元素上面，你可以按照下列步驟操作：

1. 包裝在包裝DIV的img元素，並給予該div position: relative。 absolute位置也將用於我們的目的，但這更可能影響您當前的佈局。
2. 現在，在您的包裝div中，添加將包含加載動畫（可能是gif，或包含任何其他動畫結構）的另一個div。根據您的要求，使用absolute定位並將其放置在您的img元素上。

// bind click event 
 
// you can use any event to trigger this 
 
document.querySelector("#show-loader").onclick = function(){ 
 
    document.querySelector(".loader-wrapper").className = "loader-wrapper loading"; 
 
};//

.loader-wrapper{ 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.loader-wrapper .loader{ 
 
    display: none; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.loader-wrapper.loading .loader{ 
 
    display: block; 
 
} 
 
.loader-wrapper .loader span{ 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background-color: orange; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -10px; 
 
    margin-top: -10px; 
 
    animation: zoom 1s ease infinite; 
 
} 
 

 
@keyframes zoom{ 
 
    0%{ transform: scale(1);} 
 
    50%{ transform: scale(2);} 
 
    100%{ transform: scale(1);} 
 
}

<div class="loader-wrapper"> 
 
    <input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png"> 
 
    
 
    <div class="loader"> 
 
    <span></span> 
 
    </div> 
 
</div><!--#wrapper--> 
 

 
<br /> 
 
<button id="show-loader">Show loader</button>