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

回答

相关问题