1

以下是我编写的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 的新手。请解释。

4

1 回答 1

1

将此添加到 CSS 中：

#box {
    position: relative;
}

具有位置的元素absolute将仅相对于最近的父元素进行定位，该元素的位置也不是默认值 ( static)，或者如果没有任何父元素具有非静态位置，则位置由视口确定。

我怀疑当一个元素被动画时，浏览器不再将其视为静态定位的对象。

于 2013-08-18T13:37:32.583 回答