防止模糊邊界上的轉換變換比例尺

Question

我正在處理導航欄動畫。點擊導航欄按鈕時，紅色的圓形div會進行縮放轉換以覆蓋所有頁面。問題是我在邊界放大時對模糊效果不好。我試着使用backface-visibility：hidden和translateZ（0）來修復它，但它似乎沒有解決問題。爲了更好地展示我的意思，我將轉換時間設置爲5秒。我正在使用chrome。

$(".navbar_button").click(function(){ 
 
    if ($(this).hasClass("clicked")){ 
 
    $(this).removeClass("clicked"); 
 
    $("#bar1,#bar2,#bar2b,#bar3,.round_nav,.round_nav2").removeClass("open"); 
 
    
 

 
    
 
    } 
 
    
 
    else { 
 
    $(this).addClass("clicked"); 
 
    $("#bar1,#bar2,#bar2b,#bar3,.round_nav,.round_nav2").addClass("open"); 
 
    
 
    
 
    } 
 
});

@import url('https://fonts.googleapis.com/css?family=Crimson+Text'); 
 

 
body{ 
 
    margin:0px; 
 
    overflow: hidden; 
 
} 
 

 
.container{ 
 
    height:100vh; 
 
    width:100%; 
 
    background-color:#EEE9E9; 
 
    overflow: hidden; 
 
} 
 

 
.navbar_button{ 
 
    width:30px; 
 
    height:25px; 
 
    position:absolute; 
 
    top: 40px; 
 
    right: 40px; 
 
} 
 

 
.bar{ 
 
    position:absolute; 
 
    width:100%; 
 
    height:3px; 
 
    -webkit-border-radius: 12px; 
 
    -moz-border-radius: 12px; 
 
    border-radius: 12px; 
 
    background-color:white; 
 
    cursor: pointer; 
 
    display: block; 
 
    margin: 0; 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
#bar1{ 
 
    top:0%; 
 
    left:0%; 
 
} 
 

 
#bar1.open{ 
 
    -webkit-transform: scaleX(0); 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
#bar2{ 
 
    top:calc(50% - 4px); 
 
    -webkit-transform: rotate(0deg); 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
#bar2.open{ 
 
    -webkit-transform: rotate(45deg); 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
#bar2b{ 
 
    top:calc(50% - 4px); 
 
    -webkit-transform: rotate(0deg); 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
#bar2b.open{ 
 
    -webkit-transform: rotate(-45deg); 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
#bar3{ 
 
    top:calc(100% - 8px); 
 
    right:0%; 
 
} 
 

 
#bar3.open{ 
 
    -webkit-transform: scaleX(0); 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
.round_nav{ 
 
    width:50px; 
 
    height:50px; 
 
    background-color: #FF4040; 
 
    position:fixed; 
 
    top:0px; 
 
    right:0px; 
 
    margin-top:25px; 
 
    margin-right:30px; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
    overflow: hidden; 
 
    
 
} 
 

 
.round_nav.open{ 
 
    transform: scale(60); 
 
    -webkit-transition: 5s; 
 
    transition: 5s; 
 
    
 
} 
 

 

 

 
.navbar_button:hover .round_nav{ 
 
    transform: translateZ(0); 
 
    -webkit-transform: scale(1.1); 
 
    
 
    
 
} 
 

 
.round_nav2.open{ 
 
    width:5000px; 
 
    height:5000px; 
 
    opacity:0; 
 
    margin-top:-2500px; 
 
    margin-right:-2500px; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 2s ease; 
 
    transition-delay:.1s; 
 
    -webkit-transition-delay:.1s; 
 
} 
 

 
.nav_content{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
    padding-left:20px; 
 
    margin:0px; 
 
    width:120px; 
 
    height: 200px; 
 
    -webkit-transition: .2s; 
 
    transition: .2s; 
 
    
 
} 
 

 
.nav_content li{ 
 
    color: #EEE9E9; 
 
    font-size: 30px; 
 
    font-family: 'Crimson Text'; 
 
    margin-bottom: 10px; 
 
    letter-spacing: 2px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    -webkit-transition: .3s; 
 
    transition: .3s ; 
 
} 
 

 
.nav_content ul{ 
 
    list-style-type:none; 
 
    margin-left:10px !important; 
 
    margin-top:0px; 
 
    margin-bottom:0px; 
 
    padding:0px; 
 
    position:absolute; 
 
    left:2%; 
 
    top:0px; 
 
    -webkit-transition: .6s; 
 
    transition: .6s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="round_nav2"> 
 
     
 
    </div> 
 
    
 
    <div class="round_nav"> 
 
     
 
    </div> 
 
    
 
    <div class="navbar_button"> 
 
    <span id="bar1" class="bar"></span> 
 
    <span id="bar2" class="bar"></span> 
 
    <span id="bar2b" class="bar"></span> 
 
    <span id="bar3" class="bar"></span> 
 
    </div> 
 
</div>

Answer 1

這裏的問題是，你躍上一個50像素寬的元件60倍，因此越來越jugged邊緣。

做它周圍的其他方法，在這裏設置的默認大小3000px，並調整爲0.0167，然後在點擊，它擴展到1

因爲你的CSS是有點亂我只顯示2主要規則，但您可能需要調整更多的屬性。

.round_nav{ 
    width:3000px; 
    height:3000px; 
    transform: scale(0.0167); 
    transform-origin: right top; 
    ... 
} 

.round_nav.open{ 
    transform: scale(1); 
    ... 
}