我在最新版本的 Chrome(在 Firefox 上正常工作)上遇到了一个边界半径错误，该错误持续了在 HTML 页面的 div 上使用不透明度的动画的时间 [<强>b。 html] 插入另一个 HTML 页面 [a. html] 与 object.
我尝试了其他解决方案(jQuery、Web Components...)，但没有得到我想要的东西，老实说，我更愿意为这个特定元素继续使用 object，即使它是一种老化的技术。
a.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<object id="b" data="b.html"></object>
</body>
</html>
b.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Hi, how are you?</div>
</body>
</html>
样式.css
* { margin: 0; padding: 0; }
body { background: blue; }
#b {
width: 400px;
height: 400px;
border: 10px solid black;
border-radius: 40px;
overflow: hidden;
}
div {
height: 400px;
background: white;
text-align: center;
animation: ani 2s forwards;
}
@keyframes ani {
0% { opacity: 0; }
100% { opacity: 1; }
}
感谢您的帮助!
最佳答案
举个例子，这是我找到的 jQuery 版本 [a.html]
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#b").load("b.html");
});
</script>
</head>
<body>
<div id="b"></div>
</body>
</html>
关于html - 具有不透明度关键帧的对象上的 Chrome 中的边界半径错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48630810/