0
divのアニメーションがあり、アニメーションが終了するとハートdivの隣にテキストを挿入しようとしています。私はdivにテキストを入れてみましたが、それは心臓の隣に置いてみましたが、心臓の目に見えない部分がそれを押し付け続けていたり、テキスト付きのdivが全く見えないことがあります。助けていただければ幸いです。ここでは、コードです：あなたはちょうどあなたが（ちょうど#lol前に）あなたの@keyframesを宣言し終わった後、別の閉じ括弧を追加する必要があるため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>
ありがとう！できます！ – TechEndling