javascript - 当孩子具有混合混合模式和动画时,Chrome 上的 CSS 溢出隐藏问题
问题描述
我有一个问题,即带有动画的按钮的子元素overflow: hidden
无法在 chrome 上正确显示,但它在 Firefox 上运行良好。
我已经尝试了我找到的所有解决方案,但是transform: translateZ(0)
,backface-visibility: hidden
并且will-change: opacity
不起作用。
const buttons = document.querySelectorAll('.button');
buttons.forEach(btn => {
btn.addEventListener('mouseenter', function (e) {
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
let ripples = document.createElement('div');
ripples.style.left = x + 'px';
ripples.style.top = y + 'px';
btn.appendChild(ripples);
setTimeout(() => {
ripples.remove();
}, 500);
});
});
:root {
--main-bg: #131315;
--main-bg-accent: #00000093;
--main-bg-light: #fff;
--main-accent-1: #39ffde;
--main-accent-2: #00228e;
--main-text: #fff;
}
body {
margin: 0;
padding: 0;
background-color: var(--main-bg);
font-family: sans-serif;
color: var(--main-text);
font-weight: 300;
}
.button-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
position: relative;
display: inline-block;
margin: 1rem;
padding: 0.8rem 1.8rem;
border-radius: 100px;
text-decoration: none;
color: var(--main-text);
text-transform: uppercase;
font-size: 1.8rem;
letter-spacing: 1px;
background-image: linear-gradient(
60deg,
var(--main-accent-2),
var(--main-accent-1)
);
transition: filter 500ms ease;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
transform: translateZ(0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
}
.button > div {
position: absolute;
display: block;
border-radius: 50%;
transform: translate(-50%, -50%) translateZ(0);
pointer-events: none;
background-image: radial-gradient(var(--main-accent-2), var(--main-accent-1));
animation: ripple 500ms linear 0s 1 forwards;
mix-blend-mode: screen;
will-change: opacity;
}
@keyframes ripple {
from {
width: 0px;
height: 0px;
opacity: 1;
}
to {
width: 500px;
height: 500px;
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
</head>
<body>
<div class="button-wrappee">
<a href="#" class="button">hover me</a>
</div>
</body>
</html>
解决方案
推荐阅读
- awk - 在一列中舍入到最接近的 60 的倍数
- sql - 用于显示基于其他列的值的 SQL 函数
- python - Python中的套接字编程以在Windows中传输文件
- amazon-web-services - 使用私有 docker 存储库与仅通过 CLI 将容器上传到 Beanstalk 相比,您可以获得什么?
- sql - oracle查询检查具有相同ID的行和给定字段是否都相同
- c - C中的图像阈值
- time-complexity - 优化关系
- python - 在 Python 中解决 LeetCode 3sum 问题
- depth-first-search - DFS“可以返回任何路径”
- sql-server - 使用嵌入式 SQL 表的 FileMaker 关系