div推動或不顯示其他div

我有一個看起來像一顆心的div動畫，並試圖在動畫結束時將一些文本放在心臟div旁邊。我嘗試將文本放入div中，並將其放置在心臟旁邊，但心臟的不可見部分不斷推動它，或者有時文本div不可見。一些幫助將不勝感激。下面是代碼：div推動或不顯示其他div

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推動或不顯示其他div

回答

相關問題