Разработка интерактивного баннера (CSS)
HTML:
<div class="banner">
<img src="images/zeml9.png" alt="Земля" class="zem">
<img src="images/moon.png" alt="Луна" class="moon">
<img src="images/raketa.png" alt="Ракета" class="raketa">
<div class="raketa"></div>
<divclass="content"><h2 id="sh2">Карьеравашихдетейначинаетсяунас!</h2><form>
<input type="submit" id="submit" value="Записаться"/>
</form>
</div>
</div>
CSS:
.banner{
height: 219px;
border: 1px solid #3A7AE2;
width: 100%px;
margin: 10px 15px 50px 15px;
border-radius: 5px;
background: url('images/phon.jpg') no-repeat center center;
background-size: cover;
position:relative;
box-shadow:0px 0px 30px #000;
}
.content{
height:200px;
width:310px;
background:rgba(50,155,197,0.5);
position:absolute;
right:10px;
top:10px;
border:1px solid #184564;
border-radius:10px;
z-index:100;
}
#sh2{
margin:40px 0px 0px 10px;
text-align:center;
}
#submit{
margin:40px 0px 0px 90px;
width:130px;
background-color:#FFFFFF;
height:40px;
border:1px solid #DDDDDD;
border-radius:5px;
}
.zem{
position:relative;
z-index:1;
margin:-30px 0px 0px 40px;
padding:50px;
width:180px;
}
.moon{
position:absolute;
left:125px;
top:140px;
width:90px;
animation: linear 10s anime infinite;
z-index:0;
}
@keyframes anime{
0%{width:40px;}
24%{z-index:0;}
25%{top:40px;left:260px;z-index:2;}
50%{top:80px;width:100px;}
75%{top:130px;left:23px;}
100%{width:40px;transform:rotate(360deg);}
}
.raketa{
position:absolute;
top:160px;
left:140px;
width:1px;
transform:rotate(40deg);
z-index:99;
animation:linear 6s poleteli infinite;
}
@keyframes poleteli{
0%{}
10%{top:20px;left:250px;width:20px;transform:rotate(80deg);}
100%{top:50px;left:1178px;width:150px;transform:rotate(100deg);z-index:-2;}
}