Nokovy články o webu >> Létající raketa v CSS || Home

Létající raketa v CSS

Právě vám představuju tramtaradá raketu Sojuz vytvořenou v Kaskádových stylech.
Když nejedete myší na raketu tak "vzlétne".
Ukázka
Zdroj:

<div id="raketa">
    <div id="spica"></div>
    <div id="kabina"></div>
    <div id="trup"></div>
    <div id="motor1"></div>
    <div id="motor2"></div>
</div>
<style>
#raketa {
bottom: 10px;
width: 150px; 
position: absolute;
height: 420px; 
border-bottom: 1px solid gray;
text-align: center; 
transition: border 0.5s;
}
#raketa:hover {
border-bottom: 700px solid transparent; 
transition: border 1s;
}
#kabina {
position: absolute;
bottom: 300px;
left: 50px;
background: #bab;
height: 70px;
width: 50px;
}
#motor2 {
position: absolute;
bottom: 0px;
left: 100px;
height: 0px;
width: 0px;
border-right: 50px solid transparent;
border-bottom: 170px solid gray;
}
#motor1 {
position: absolute;
bottom: 0px;
left: 0px;
height: 0px;
width: 0px;
border-left: 50px solid transparent;
border-bottom: 170px solid gray;
}
#spica {
position: absolute;
bottom: 370px;
left: 50px;
height: 0px;
width: 0px;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 100px solid gray;
}
#trup {margin: auto;
bottom: 0px; 
left: 50px;
position: absolute; 
width: 50px;
height: 300px;
background: #3c3c3c;
}
</style>