z-index問題與CSS動畫有關
[英]z-index issues with CSS animation
問題描述
第一次發布在這里，長期以來一直使用該網站作為我遇到的任何問題的資源，但我第一次無法使用以前的答案修復我的代碼。
對於我所要求的東西，我可能只是一個非常簡單的答案，我只是錯過了一些東西。
我正在嘗試創建一個我可以很快在生產網站中使用的代碼片段。 我想創建一個圍繞圖像的圖像“框架”。 然后我也希望這個框架能夠動畫並從一側到另一側擺動。
在插入動畫代碼之前，代碼如下，並且完美地工作（框架在圖像上方）。
.frame {
margin-top: 5rem;
margin-left: 35%;
display: inline-flex;
background-image: url(http://www.studiopastimes.info/tester/images/frame.svg);
background-repeat: no-repeat;
z-index: 1000;
padding: 3rem;
box-sizing: border-box;
}
.internal-frame {
position: relative;
width: 400px;
z-index:-5;
}
.internal-frame img {
width: 100%;
}
但是，當我添加動畫代碼時，這會破壞z-index。
@-webkit-keyframes swinging{
0%{-webkit-transform: rotate(10deg);}
33%{-webkit-transform: rotate(-5deg);}
66%{-webkit-transform: rotate(10deg);}
100%{-webkit-transform: rotate(-5deg);}
}
@keyframes swinging{
0%{-webkit-transform: rotate(10deg);}
33%{-webkit-transform: rotate(-5deg);}
66%{-webkit-transform: rotate(10deg);}
100%{-webkit-transform: rotate(-5deg);}
}
.swingimage{
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 5s ease-in-out ;
animation: swinging 5s ease-in-out ;
animation-fill-mode: forwards;
backface-visibility: hidden;
}
這可以在Codepen中看到： https ：//codepen.io/anon/pen/RMrrWB
任何想法如何讓CSS動畫工作，惠斯特仍然有圖像上方的框架？ 我從我的研究中了解到CSS動畫和z-index的問題，但我無法獲得任何建議的修復工作。 任何幫助都會很棒，如果我提出這個問題有什么問題請告訴我！
謝謝
2 個解決方案
解決方案1
2 已采納 2018-03-13 16:27:16
我把框架放在一個偽元素上：
.frame { margin-top: 5rem; margin-left: 35%; box-sizing: border-box; width: 400px; padding-top: 69.25%; /* this is the aspect ratio of the image: height / width */ position: relative; } .frame:after { content:''; display:block; position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; right: 0; background-image: url(http://www.studiopastimes.info/tester/images/frame.svg); background-repeat: no-repeat; padding: 20px; } img { position: absolute; top: 20px; /* match the padding */ left: 0; width: 100%; z-index: 1; } @-webkit-keyframes swinging { 0% { -webkit-transform: rotate(10deg); } 33% { -webkit-transform: rotate(-5deg); } 66% { -webkit-transform: rotate(10deg); } 100% { -webkit-transform: rotate(-5deg); } } @keyframes swinging { 0% { -webkit-transform: rotate(10deg); } 33% { -webkit-transform: rotate(-5deg); } 66% { -webkit-transform: rotate(10deg); } 100% { -webkit-transform: rotate(-5deg); } } .swingimage { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: swinging 5s ease-in-out; animation: swinging 5s ease-in-out; animation-fill-mode: both; backface-visibility: hidden; }
<div class="frame swingimage"> <img src="http://www.studiopastimes.info/tester/images/cabaret.jpg" class="img"> </div>
解決方案2
0 2018-03-13 16:10:46
z-index屬性需要元素具有設置位置。 然后，如果你只是添加position: relative; 對你的.frame來說，它會成功。
完整的CSS：
.frame {
margin-top: 5rem;
margin-left: 35%;
display: inline-flex;
position: relative;
background-image: url(http://www.studiopastimes.info/tester/images/frame.svg);
background-repeat: no-repeat;
position: relative
z-index: 10;
padding: 3rem;
box-sizing: border-box;
/* height: 10rem;
width: 20rem;*/
}
.internal-frame {
position: relative;
width: 400px;
z-index:-5;
}
.internal-frame img {
width: 100%;
z-index:-5;
}
@-webkit-keyframes swinging{
0%{-webkit-transform: rotate(10deg);}
33%{-webkit-transform: rotate(-5deg);}
66%{-webkit-transform: rotate(10deg);}
100%{-webkit-transform: rotate(-5deg);}
}
@keyframes swinging{
0%{-webkit-transform: rotate(10deg);}
33%{-webkit-transform: rotate(-5deg);}
66%{-webkit-transform: rotate(10deg);}
100%{-webkit-transform: rotate(-5deg);}
}
.swingimage{
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 5s ease-in-out ;
animation: swinging 5s ease-in-out ;
animation-fill-mode: both;
backface-visibility: hidden;
}
用你的HTML：
<!DOCTYPE html>
<html>
<head>
<title>FRAME TESTER</title>
</head>
<body>
<div class="frame">
<div class="internal-frame">
<img src="http://www.studiopastimes.info/tester/images/cabaret.jpg">
</div>
</div>
</body>
</html>
CSS3動畫Z索引越野車？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.