Witam,
Podczas nauki animacji z css trafiłem na problem, nie wiem dlaczego nie mogę zmienić wysokości i szerokości div_1 i div_2 na inspektorze oba divy są na stronie ale ich wysokość jest równa zero a szerkość równa szerokości ekranu.
Proszę o pomoc ale nie rozwiązania problemu tylko wytłumaczeniu mi dlaczego tak się dzieję. Dzięki z góry za pomoc. Kod wklejam poniżej.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="costyle.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>Co Dziś Wypij<span id="B">e</span>sz?</h1>
<div style="clear:both"></div>
<div id="div_1">
</div>
<div style="clear:both"></div>
<div id="div_2">
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
#container{
width:100vw;
height:100vh;
background-color:#000000;
}
h1{
font-size: 9vw;
letter-spacing: 0.7vw;
font-family: 'Ubuntu', sans-serif;
color:#fe7f00;
text-shadow: 0 0 1vw white, 0 0 0.1vw #24bbe5;
animation: bla;
animation-duration: 2s;
margin-bottom: 30vw;
}
#B{
transform: rotate(15deg) translateY(0.2vw);
animation: miganie 1.5s infinite linear;
}
@keyframes miganie{
0%{
opacity: 0;
}
8%{
opacity: 1.1;
}
26%{
opacity: 1;
}
39%{
opacity: 0.25;
}
50%{
opacity: 1;
}
60%{
opacity: 0.2;
}
70%{
opacity: 0.3;
}
83%{
opacity: 0.6;
}
91%{
opacity:0,3;
}
100%{
opacity: 1;
}
}
@keyframes bla{
0%{
opacity: 0;
}
20%{
opacity: 0.5;
}
30%{
opacity: 0.1;
}
51%{
opacity: 0.3;
}
68%{
opacity: 0.1;
}
88%{
opacity: 0.6;
}
93%{
opacity: 0.9;
}
100%{
opacity: 1;
}
#div_1{
width:300px;
height: 200px;
background-color: aliceblue;
float:left;}
#div_2{
width: 300px;
height: 400px;
background-color: red;
}