Добрый день.
Подскажите, пожалуйста, как можно исправить данную ситуацию:
Код в HTML
<body>
<br>
<h1> Happy New Year </h1>
<div id="tree">
<div id="lvl1"></div>
<div id="lvl2"></div>
<div id="lvl3"></div>
</div>
<div id="animated">
<span class="ball1"></span>
<span class="ball2"></span>
<span class="ball3"></span>
<span class="ball4"></span>
<span class="ball5"></span>
<span class="ball6"></span>
<span class="ball7"></span>
<span class="ball8"></span>
<span class="ball9"></span>
<span class="ball10"></span>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h2>🎄 and 🎄 </h2>
<h2>Merry Christmas!!!</h2>
</body>
Код в CSS
background-color:#fcd975;
width:350px;
height:500px;
border-style: solid;
border-image-width: 20px;
border-image-source: url(http://www.kartinkijane.ru/pic/201503/1152x864/kartinkijane.ru-84535.jpg);
border-image-slice: 30;
border-image-repeat: round;
}
h1{
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;
font-style:italic;
vertical-align:top;
border-style: hidden;
color:#CC0605;
text-shadow:2px 2px 4px #048118;
}
h2{
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;
font-style:italic;
border-top-style:hidden;
vertical-align:bottom;
color:#CC0605;
text-shadow:2px 2px 4px #048118;
}
#lvl1 {
position: absolute;
left:-10px;
top: 90px;
width:0;
height:0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 105px solid #066517;
margin-left:40%;
}
#lvl2 {
position: absolute;
left: -20px;
top: 145px;
width:0;
height:0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 105px solid #066517;
margin-left:40%;
margin-top:0;
}
#lvl3{
position: absolute;
left: -30px;
top: 240px;
width:0;
height:0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 106px solid #066517;
margin-left:40%;
margin-top:-40px;
}
#lvl3:after{
content:"";
width:15px;
height:40px;
position:relative;
display:block;
top:105px;
left:-5px;
background-color:#472806;
}
.ball1{
position: absolute;
right: 170px;
top:150px;
width: 10px;
height: 10px;
background: #FF1493;
border-radius: 50%;
animation: rainbow 2s linear 0.1s infinite;
}
.ball2{
position: absolute;
right: 190px;
top:160px;
width: 10px;
height: 10px;
background: #ca18ff;
border-radius: 50%;
animation: rainbow 2s linear 1s infinite;
}
.ball3{
position: absolute;
right: 150px;
top:120px;
width: 10px;
height: 10px;
background: #0000FF;
border-radius: 50%;
animation: rainbow 2s linear 1s infinite;
}
.ball4{
position: absolute;
right: 190px;
top:270px;
width: 10px;
height: 10px;
background: #00BFFF;
border-radius: 50%;
animation: rainbow 2s linear 0.5s infinite;
}
.ball5{
position: absolute;
right: 160px;
top:280px;
width: 10px;
height: 10px;
background: #00FF7F;
border-radius: 50%;
animation: rainbow 2s linear 1.5s infinite;
}
.ball6{
position: absolute;
right: 140px;
top:200px;
width: 10px;
height: 10px;
background: #66FF00;
border-radius: 50%;
animation: rainbow 2s linear 1s infinite;
}
.ball7{
position: absolute;
right:170px;
top:232px;
width: 10px;
height: 10px;
background: #CEFF1D;
border-radius: 50%;
animation: rainbow 2s linear 0.6s infinite;
}
.ball8{
position: absolute;
right: 130px;
top:160px;
width: 10px;
height: 10px;
background: #FC2847;
border-radius: 50%;
animation: rainbow 2s linear 1.5s infinite;
}
.ball9{
position: absolute;
right: 175px;
top:200px;
width: 10px;
height: 10px;
background: #FFA812;
border-radius: 50%;
animation: rainbow 2s linear 0.5s infinite;
}
.ball10{
position: absolute;
right: 130px;
top:250px;
width: 10px;
height: 10px;
background: #FF4D00;
border-radius: 50%;
animation: rainbow 2s linear 1s infinite;
}
@keyframes rainbow{
0%{
background:#00FF00;
}
20%{
background:#C71585;
}
40%{
background:#008B8B;
}
60%{
background:#FFFF00;
}
80%{
background:#8B008B;
}
100%{
background:#ff1830;
}
}
При запуске с разных устройств, шарики и елка смещаются.
Если на телефоне, это выглядит прилично, то на экране компьютера видно, что шарики висят в воздухе возле елки.
Пыталась настроить размер тега body, но результатов это не принесло.
Что можно сделать?
Простой
Простой