1
코드를 만들었습니다. 버튼이있는 풍선 메뉴입니다. Chrome에서 완벽하게 작동하지만 mozilla에서 제대로 작동합니다. 당신은 볼이Firefox flexbox가 작동하지 않습니다.
$(".roundedBallOuter").click(function(e) {
$(this).toggleClass("clicked");
});body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.roundedBallOuter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.roundedBall {
width: 200px;
height: 200px;
background: #ccc;
border-radius: 100%;
position: relative;
transition: all 0.3s ease;
cursor: pointer;
}
.roundedBall:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
box-shadow: 0 0 10px #555;
transition: all 0.3s ease;
}
.subBall {
width: 50px;
height: 50px;
background: #0077ab;
border-radius: 100%;
position: absolute;
transition: all 0.5s ease;
z-index: -1;
}
.roundedBallOuter.clicked .subBall.linkedIn {
transform: translate(-10em);
-webkit-transform: translate(-10em);
-moz-transform: translate(-10em);
-ms-transform: translate(-10em);
transition: all 0.5s ease;
}
.roundedBallOuter.clicked .subBall.facebook {
transform: rotate(45deg) translate(-10em) rotate(-45deg);
-webkit-transform: rotate(45deg) translate(-10em) rotate(-45deg);
-ms-transform: rotate(45deg) translate(-10em) rotate(-45deg);
-moz-transform: rotate(45deg) translate(-10em) rotate(-45deg);
transition: all 0.5s ease;
}
.roundedBallOuter.clicked .subBall.twitter {
transform: rotate(90deg) translate(-10em) rotate(-90deg);
-webkit-transform: rotate(90deg) translate(-10em) rotate(-90deg);
-moz-transform: rotate(90deg) translate(-10em) rotate(-90deg);
-ms-transform: rotate(90deg) translate(-10em) rotate(-90deg);
transition: all 0.5s ease;
}
.more {
font-size: 20px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.more>span {
color: #0077ab;
display: block;
font-style: italic;
font-size: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="roundedBallOuter">
<div class="roundedBall">
<span class="more"><span>Click</span> for more information</span>
</div>
<div class="linkedIn subBall"></div>
<div class="facebook subBall"></div>
<div class="twitter subBall"></div>
</div>당신이 나를 도와이 버그를 수정시겠습니까 시도 할 수 있습니다? 미리 감사드립니다.
나는 파이어 폭스 48.0.2에있어 64 비트와 내가 크롬에서 입력하려고 – mlegg
을 클릭하면 작은 파란색 원이 옆으로 상단에서 이동합니다. 내가 원하는대로 작동합니다. 플렉스로 뭔가 짜증나는 것 같아요. – Tinakicious
@ flexbox 컨테이너의 @Tinakicious 3 개가 절대적이므로 예측할 수없는 동작을 보이고 있습니다 ... AFAIK 이것을 변경해야합니다 ... 'align-items : stretch 'Firefox에서 문제를 해결할 수 있지만, 디자인을 수정하지 않으면 장기적으로 문제가 발생할 것입니다 ... – kukkuz