Question

我正在处理导航栏动画。单击导航栏按钮，红色圆形div将进行缩放转换以覆盖所有页面。问题是我在边框上放大时的模糊效果很差。我尝试使用backface-visibility：hidden和translateZ（0）来修复它，但它似乎无法解决问题。为了更好地向您展示我的意思，我将过渡时间设置为5秒。我正在使用chrome。

＆＃13;

$(".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");
  
    
  }
});

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这里的问题是你将50px宽的元素缩放60次，因此得到了粗糙的边缘。

反之亦然，将默认大小设置为3000px并缩放为0.0167，然后单击，将其缩放为1.

由于你的CSS有点乱，我只是展示了两个主要规则，但你可能需要调整一些属性。

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

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

防止过渡变换比例

1 个答案: