下面是我写的html代码
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
width: 200px;
height: 250px;
border-radius: 15px;
background-color: pink;
border-color: red;
border-style: solid;
display: block;
-webkit-animation: myrotate 3s infinite; /* animation enabled */
}
#box:after /* not working if animation is disabled*/
{
content:"";
display:block;
position:absolute;
bottom:-15px;
left:20px;
width:0;
border-width:15px 25px 0;
border-style:solid;
border-color:#13961c transparent;
}
@-webkit-keyframes myrotate
{
from
{
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
to
{
-webkit-transform:rotate(360deg); /* Safari and Chrome */
}
}
</style>
</head>
<body>
<center>
<div id="box">
xyz <br/>
yzx <br>
</div>
</center>
</body>
</html>
问题是对话气泡指针仅在启用动画 myrotate 时出现。如果它被评论指针消失。我是 css3 和 html5 的新手。请解释。
最佳答案
将此添加到 CSS:
#box {
position: relative;
}
具有 absolute 位置的元素将仅相对于最近的父级定位，该父级也具有默认位置(static)以外的位置，或者如果没有 parent 有一个非静态位置，然后根据视口(viewport)确定位置。
我怀疑当一个元素被动画化时，浏览器不再将它视为一个静态定位的对象。
关于html - 语音气泡指针丢失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18298517/