div получить толчок вокруг или не появляться другими divs

У меня есть анимация для div, которая выглядит как сердце, и я пытаюсь поместить текст рядом с сердцем div, когда анимация заканчивается. Я попытался положить текст в div и позиционировать, что рядом с сердцем, но невидимая часть сердца продолжает толкать его или иногда div с текстом вообще не видна. некоторая помощь будет оценена. Вот код:div получить толчок вокруг или не появляться другими divs

body { 
 
    overflow: ; 
 
} 
 

 
#heart { 
 
    position: relative; 
 
    width: 1000px; 
 
    height: 900px; 
 
    left: 300px; 
 
    top: 200px; 
 
    color: blue; 
 
    z-index: 2; 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
    animation-delay: 1s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
#heart:before, 
 
#heart:after { 
 
    position: absolute; 
 
    content: ""; 
 
    left: 50px; 
 
    top: 0; 
 
    width: 50px; 
 
    height: 80px; 
 
    background: red; 
 
    -moz-border-radius: 5000px 5000px 0 0; 
 
    border-radius: 5000px 5000px 0 0; 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transform-origin: 0 100%; 
 
    -moz-transform-origin: 0 100%; 
 
    -ms-transform-origin: 0 100%; 
 
    -o-transform-origin: 0 100%; 
 
    transform-origin: 0 100%; 
 
    z-index: 2; 
 
} 
 

 
#heart:after { 
 
    left: 0; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    -webkit-transform-origin: 100% 100%; 
 
    -moz-transform-origin: 100% 100%; 
 
    -ms-transform-origin: 100% 100%; 
 
    -o-transform-origin: 100% 100%; 
 
    transform-origin: 100% 100%; 
 
    z-index: 2; 
 
} 
 

 
@keyframes example { 
 
    0% { 
 
    position: absolute; 
 
    z-index: 2; 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transform-origin: 0 100%; 
 
    -moz-transform-origin: 0 100%; 
 
    -ms-transform-origin: 0 100%; 
 
    -o-transform-origin: 0 100%; 
 
    transform-origin: 0 100%; 
 
    } 
 
    50% { 
 
    left: 0; 
 
    z-index: 2; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    -webkit-transform-origin: 100% 100%; 
 
    -moz-transform-origin: 100% 100%; 
 
    -ms-transform-origin: 100% 100%; 
 
    -o-transform-origin: 100% 100%; 
 
    transform-origin: 100% 100%; 
 
    } 
 
    100% { 
 
    z-index: 2; 
 
    } 
 
    #lol { 
 
    position: absolute; 
 
    right: 100px; 
 
    top: 200px; 
 
    font-family: Quicksand; 
 
    color: black; 
 
    }

<html> 
 
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" /> 
 

 
<body> 
 
    <div id="heart"></div> 
 
    <div id="lol">#Forever Alone</div>

источник

2017-02-22 TechEndling

Возможно, вы пропустили {после. То есть,

100%{ 
    z-index:2; 
} 
#lol {

должен быть

100% { 
    z-index: 2; 
    } 
} 
#lol {

Надеется, что это помогает!

источник

2017-02-22 18:03:43

Спасибо! оно работает! – TechEndling

Странное форматирование происходит потому, что вам просто нужно добавить еще одну закрывающую скобку после того, как вы закончите объявляя свои @keyframes (перед #lol).

#heart { 
    position: relative; 
    width: 1000px; 
    height: 900px; 
    left: 300px; 
    top: 200px; 
    color: blue; 
    z-index: 2; 
    animation-name: example; 
    animation-duration: 4s; 
    animation-delay: 1s; 
    animation-fill-mode: forwards; 
} 

#heart:before, 
#heart:after { 
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 50px; 
    height: 80px; 
    background: red; 
    -moz-border-radius: 5000px 5000px 0 0; 
    border-radius: 5000px 5000px 0 0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
    z-index: 2; 
} 

#heart:after { 
    left: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin: 100% 100%; 
    z-index: 2; 
} 

@keyframes example { 
    0% { 
    position: absolute; 
    z-index: 2; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
    } 
    50% { 
    left: 0; 
    z-index: 2; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin: 100% 100%; 
    } 
    100% { 
    z-index: 2; 
    } 
} 
#lol { 
    position: absolute; 
    right: 100px; 
    top: 200px; 
    font-family: Quicksand; 
    color: black; 
}

источник

2017-02-22 18:03:20 Sara

div получить толчок вокруг или не появляться другими divs

ответ

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