css3-animation實踐1 兩個元素的翻轉與切換
阿新 • • 發佈:2019-02-01
今天開發專案時,表格資訊填寫下方會有提示行,為藍色背景。提交表格資料時候,如果有錯誤提示,會在提示行上方,背景紅色。但是兩層提示會顯得很礙眼,所以自己想法是如果有錯誤提示,直接翻轉提示行180度然後顯示錯誤提示,然後2s後錯誤提示翻轉回到提示行。大概就是這麼個簡單動畫。
這裡一開始打算用一個div來翻轉和顯示,但是翻轉180度以後,元素裡面的字型是倒的,這顯然不符合我們的要求。後來終於找到了解決辦法。
當我們進行3d轉換的時候,有一個屬性可以設定backface-visibility。參考W3C的解釋:http://www.w3school.com.cn/cssref/pr_backface-visibility.asp
大致意思就是當元素進行3d轉換並且呈現背面時候,不顯示該元素。這樣思路就來了,我們可以設定兩個重疊的元素,一個在上方,並且設定背面不顯示。當兩個元素同時轉動,前方元素因為背面不顯示的原因(即180度後),會顯示後面元素。再一個180度後,前方元素又開始顯示了。這樣看起來就像是一個元素轉動到180後切換了一個元素一樣。
話不多說,貼程式碼了。
css:
img.center{display: block;position: absolute;width: 512px;height: 512px;left: 50%;top: 50%;margin-left: -256px;margin-top: -256px;} img.left{display: block;position: absolute;width: 256px;height: 256px;left: 50px;top: 50px;} .z_index{z-index: 5;} .turn_front{animation:front 6s linear infinite;backface-visibility: hidden;} .turn_back{animation:back 6s linear infinite} @keyframes front{ 0%{transform: rotateX(0deg);} 30%{transform: rotateX(180deg);} 70%{transform: rotateX(180deg);} 100%{transform: rotateX(360deg);} } @keyframes back{ 0%{transform: rotateX(-180deg);} 30%{transform: rotateX(0deg);} 70%{transform: rotateX(0deg);} 100%{transform: rotateX(180deg);}
}
html:<img class="z_index left" src="../image/Microsoft_Office_front.png" id="front_img"> <img class="left" src="../image/Microsoft_Office_back.png" id="back_img"> <img class="z_index turn_front center" src="../image/Microsoft_Office_front.png"> <img class="turn_back center" src="../image/Microsoft_Office_back.png"> <button onclick="turn()">點我翻轉</button>
js:
function turn() {
var front_img = document.getElementById("front_img");
var back_img = document.getElementById("back_img");
front_img.classList.add("turn_front");
back_img.classList.add("turn_back");
setTimeout(function() {
front_img.classList.remove("turn_front");
back_img.classList.remove("turn_back");
},6000);
}
中間的圖片一直迴圈轉動,左方圖片需要點選按鈕執行一次轉動。