我有一個向下的箭頭與周圍的連鎖反應環。向下箭頭單擊不能與其周圍的環一起使用,但如果我取下環,則點擊功能正常工作。向下箭頭單擊不起作用的波紋環動畫
這是網頁:https://rimildeyjsr.github.io/St.Anthony-Website/
任何想法如何解決呢?
CSS:
body{
background: red;
}
.down-arrow {
display: none;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 5;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
HTML:
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
猜測這是與z-index相關的東西,將箭頭放在頂部(增加z-index)。順便說一句,你的箭頭設置爲顯示:無,所以,不確定期望的行爲? – sinisake
我應該添加一個鏈接到我的項目,我的不好 –
@nevermind - 感謝評論!該代碼的工作 –