Не уверен, почему он не отображается, это может быть проблема с отображением. Для div "sparkle" я хочу, чтобы он находился в верхнем левом углу, потому что я хочу добавить эффект свечения, но он говорит, что имеет размеры 0 x 0, но я дал ему размеры. любая подсказка, почему это не отображается? Он отображается во фрагменте, но когда я запускаю его через vscode, этого не происходит.
.body {
margin: 0;
box-sizing: border-box;
}
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
background: #E56262;
color: #fff;
}
.center {
position: absolute;
width: 220px;
height: 220px;
top: 90px;
left: 90px;
}
.center-inner {
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: black;
font-size: 2rem;
}
.dot-1 {
position: absolute;
width: 150px;
height: 150px;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
animation: dot1 4s infinite alternate;
animation-fill-mode: both;
display: flex;
justify-content: center;
align-items: center;
}
.dot-2 {
position: absolute;
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
animation: dot2 4s infinite alternate;
animation-fill-mode: both;
display: flex;
justify-content: center;
align-items: center;
}
.dot-3 {
position: absolute;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
animation: dot3 4s infinite alternate;
animation-fill-mode: both;
display: flex;
justify-content: center;
align-items: center;
}
.sparkle {
position: absolute;
left: 10%;
top: 10%;
height: 10px;
width: 10px;
background: #fff;
}
@keyframes dot1 {
0%, 10% {
transform: scale(0);
box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.3);}
100% {
transform: scale(1);
box-shadow: 2px 0px 10px 2px rgba(0,0,0,0.3);}
}
@keyframes dot2 {
0%, 40% {
transform: scale(0);
box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.3);}
100% {
transform: scale(1);
box-shadow: 2px 0px 10px 2px rgba(0,0,0,0.3);}
}
@keyframes dot3 {
0%, 70% {
transform: scale(0);
box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.3);}
100% {
transform: scale(1);
box-shadow: 2px 0px 10px 2px rgba(0,0,0,0.3);}
}
<body>
<div class="frame">
<div class="center">
<div class="center-inner">
<div class="dot-1"></div>
<div class="dot-2"></div>
<div class="dot-3"></div>
</div>
<div class="sparkle"></div>
</div>
</div>