CSS3 transition
poate fi utilizat pentru a anima proprietatile CSS, adaugand un efect de animatie cand se modifica proprietatile CSS ale unui element HTML, schimband gradual de la un stil la altut.
CSS3 transition are 4 componente:
transition-property
).transition-duration
).<style> #iddv { width:80px; height:80px; background:#b8b9fe; font-size:17px; transition-property: width; transition-duration: 1.4s; } #iddv:hover { width:200px; } </style> <div id="iddv">Pozitionati mouse-ul pe acest patrat.</div>
transition: property duration timing-function delay;
<style> .clse { width:200px; font-size:13px; transition: font-size 0.4s ease-out; } .clse:hover { font-size: 16px; } </style> <ul> <li class="clse"><a href="//marplo.net/css" title="Curs CSS gratuit">Curs CSS gratuit</a></li> <li class="clse"><a href="//marplo.net/html" title="Curs HTML">Curs HTML</a></li> <li class="clse"><a href="//coursesweb.net/" title="Cursuri Programare Web">Cursuri Programare Web</a></li> </ul>
<style> .dv1 { width:115px; height:100px; position:relative; font-size:17px; text-align:center; padding-top:18px; } .clsdv { width:120px; height:100px; position:absolute; top:0; left:0; background:#b8b9fe; transition: background 1.3s, opacity 1.8s, transform 1.4s; } .clsdv:hover { background: #00da01; opacity:0.5; transform:rotate(180deg); } </style> Puneti mouse-ul deasupra acestui dreptunghi. <div class="dv1"> <div class="clsdv"></div> Text oarecare, ascuns </div><style> .dv1 { width:115px; height:100px; position:relative; font-size:17px; text-align:center; padding-top:18px; } .clsdv { width:120px; height:100px; position:absolute; top:0; left:0; background:#b8b9fe; transition: background 1.3s, opacity 1.8s, transform 1.4s; } .clsdv:hover { background: #00da01; opacity:0.5; transform:rotate(180deg); } </style> Puneti mouse-ul deasupra acestui dreptunghi. <div class="dv1"> <div class="clsdv"></div> Text oarecare, ascuns </div>
• O alta metoda de a anima proprietatile unui element HTML cu CSS este utilizand proprietatile "animation". Vedeti tutorialul: Animatie elemente HTML cu CSS.
<table></tr> <td>Cell-1</td><td>Cell-2</td> </tr></table>
h3 { background-image: url("image.jpg"); }
var arr = [1, "ab", "CoursesWeb.net"]; for(var i=0; i< arr.length; i++) { alert(arr[i]); };
$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3"); foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }
He is so kind and meek. - El este atat de amabil si bland.
Tu padre tiene un carácter muy manso. - Tatal tau are un caracter foarte bland.