波及效应 - 边界半径的问题

如果你有大的视网膜显示屏（小MAC视网膜它也窃听） - 看到它看起来很不错，但如果你把它带到非视网膜显示器，它看起来有点模糊和矩形d，而不是圆角。

如果你没有视网膜显示器（或Mac笔记本电脑） - 你可以使用devtools和动画放缓至10％，看的时候放慢它正确的行为，但在正常速度看起来不同。

更新问题似乎主要在Chrome中，FF运行良好。

简洁CSS：

.container { 
    width: 700px; 
    height: 128px; 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    cursor: pointer; 

    .ripple-container { 
    width: 100%; 
    height: 100%; 
    background-color: #F5B30C; 
    position: relative; 
    overflow: hidden; 
    } 

    .ripple { 
    position: absolute; 
    background-color: blue; 
    top: 0; 
    right: 0; 
    height: 3px; 
    width: 3px; 
    border-radius: 50%; 
    transition: transform 1s; 

    &.rippler-active { 
     transition: transform 0.5s; 
     transform: scale(500); 
    } 
    } 
}

来源

2017-03-05 Omri Aharon

我有一个类似的问题，镀铬似乎以奇怪的方式“优化”边缘。它似乎无法在转换时足够快地调整边界半径，因此模糊了它。我相信有黑客或变通办法，但我建议使用SVG。 –

顺便说一句，它不是你的涟漪容器，应该有一个背景颜色，但它的父母，也......突然“rippler”R：D - 是的，Chrome浏览器有时是一个讨厌的浏览器... –

是的，我主要copy粘贴形式我的项目，有一些更复杂的逻辑，这得到了点，所以我保持它。 Rippler听起来不错:) –

而不是从缩放1至500（这将创建所有类型的地下邪恶的bug）... 0
量表来（说）3，但比，而不是设置初始大小为0（或3px），您需要将其设置为像1400px这样的巨大尺寸。

的1400px * 3规模的波纹=意味着它最多可扩展到4200px这是我觉得绰绰有余用于任何目的：

var el = document.querySelector('.container'); 
 
var ripple = document.querySelector('.ripple'); 
 

 
el.addEventListener('click', function() { 
 
    ripple.classList.toggle("ripple-active") 
 
});

.container { 
 
    height: 128px; 
 
    border-top-left-radius: 4px; 
 
    border-top-right-radius: 4px; 
 
    cursor: pointer; 
 
} 
 

 
.ripple-container { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #F5B30C; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.ripple { 
 
    position: absolute; 
 
    background-color: #3f3fd8; 
 
    top: 0; 
 
    right: 0; 
 
    height: 1400px; 
 
    width: 1400px; 
 
    /* Notice the size!! */ 
 
    margin: -700px -700px auto auto; 
 
    /* and set here the desired offset */ 
 
    border-radius: 50%; 
 
    transition: transform 2s; 
 
    transform: scale(0); 
 
} 
 

 
.ripple.ripple-active { 
 
    transition: transform 2s; 
 
    transform: scale(3);   /* 1400 * 3 !!! yey */ 
 
}

<div class="container"> 
 
    <div class="ripple-container"> 
 
    <div class="ripple"></div> 
 
    </div> 
 
</div>

来源

2017-03-05 09:46:32

非常好，非常感谢！ –

另一个想法是使波纹达到容器宽度的150％ - 并使其成为方形（高度=宽度）。但比你最有可能不得不解决问题非水平元素（其中高度>宽度） - 并在逻辑上移动... –

波及效应 - 边界半径的问题

回答

相关问题