2013-08-18 3 views
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. пожалуйста, объясни.

+0

попробуйте прокомментировать оба события анимации '-webkit-animation' и' animation'. Кажется, что ничего не случилось с остальной частью css. –

+0

даже после удаления * анимация * указатель не отображается. – nbbk

ответ

1

Добавьте к этому CSS:

#box { 
    position: relative; 
} 

Элементы, которые имеют место absolute будет позиционироваться только по отношению к ближайшему родителю, который также имеет место, кроме используемого по умолчанию (static) или если ни один из у родителей есть нестатическая позиция, тогда позиция определяется по видовому экрану.

Я подозреваю, что когда элемент анимирован, браузер не рассматривает это как статически позиционированный объект.

Смежные вопросы