html {
border: 3px solid #27759C;
}
body {
font-size: 150%;
background: #3399CC;
padding: 15px
}
.pogoda {
list-style: none;
font-family: sans-serif;
text-align: center;
padding: 0;
background: #cccccccc;
font-size: 0;
position: relative;
width: 75%;
left: 15%;
box-sizing: border-box;
margin-top: -30px;
border: 3px solid white;
}
.pogoda:hover {
opacity: 0.65;
}
.text {
color: white;
margin-top: -15px;
}
.text2 {
color: white;
margin-top: 15px;
font-family: Arial sans-serif;
font-weight: 100;
text-align: center;
margin-right: -26px;
}
.pogoda li {
display: inline-block;
font-size: 25px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
position: relative;
}
.one1 {
width: 49%;
border: 1px solid white;
padding-top: 7px;
padding-bottom: 7px;
background: #3399CC;
}
.one22 {
width: 25%;
border: 1px solid white;
padding-top: 7px;
padding-bottom: 7px;
background: #33CCCC;
}
.one {
width: 24.7%;
border: 1px solid white;
padding-top: 7px;
padding-bottom: 7px;
background: #996699;
}
.two {
width: 24.51%;
border: 1px solid white;
padding-top: 7px;
padding-bottom: 7px;
}
.two1 {
width: 24.74%;
border: 1px solid white;
padding-top: 7px;
padding-bottom: 7px;
}
.col1 {
background: #C24747;
}
.col2 {
background: #E2674A;
}
.col3 {
background: #FFCC66;
}
.col4 {
background: #99CC99;
}
.three1 {
width: 29%;
border: 1px solid white;
padding-top: 20px;
padding-bottom: 7px;
background: #669999;
}
.three2 {
width: 46.6%;
border: 1px solid white;
padding-top: 20px;
padding-bottom: 7px;
background: #CC6699;
}
.three {
width: 23.1%;
border: 1px solid white;
padding-top: 20px;
padding-bottom: 7px;
background: #339966;
}
.four {
width: 97.5%;
border: 1px solid white;
padding: 5px;
background: #666699;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pogoda</title>
<link rel="stylesheet" href="stylepogoda.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.5/css/weather-icons.min.css">
</head>
<body>
<h4 class="text">Css Weather Forecast
<i class="wi wi-sunrise"></i>
</h4>
<section class="test">
<ul class="pogoda">
<li class="one1">Lisbon
<br> 21°C
<i class="wi wi-day-sunny"></i>
</li>
<li class="one22">Paris
<br> 11°C
<i class="wi wi-day-hail"></i>
</li>
<li class="one">Belgrade
<br> 15°C
<i class="wi wi-day-cloudy"></i>
</li>
<li class="two col1">Moscow
<br> 21°C
<i class="wi wi-day-cloudy-high"></i>
</li>
<li class="two col2">Tel Aviv
<br> 32°C
<i class="wi wi-hot"></i>
</li>
<li class="two col3">Cair
<br> 21°C
<i class="wi wi-day-sunny"></i>
</li>
<li class="two1 col4">New York
<br> 17°C
<i class="wi wi-day-snow-thunderstorm"></i>
</li>
<li class="three1">New Delphi
<br> 17°C
<i class="wi sleet"></i>
</li>
<li class="three2">San Francisco
<br> 15°C
<i class="wi wi-day-cloudy"></i>
</li>
<li class="three">Tokyo
<br> 8°C
<i class="wi wi-night-clear"></i>
</li>
<li class="four">Sydney
<br> 25°C
<i class="wi wi-night-cloudy"></i>
</li>
</ul>
</section>
<h6 class="text2">Have a nice day and don't forget umbrella if you are in New Delphi now</h6>
</body>
</html>
Ссылка на ютуб парня Помогите мне сделать такою же анимацию как на видео,