Simulace animace v CSS

1. října 2005

•

Pseudoanimace při přejíždění kurzorem po speciálním elementu.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku How to Create Flick Animations with CSS.

CSS

body
{
text-align:center;
font-family: tahoma, verdana, arial, sans-serif;
font-size:76%;
color:#aaa;
}
#film
{
margin:0 auto 0 auto;
}
#film
{
position:relative;
width:220px;
height:160px;
background:#000 url(f12.jpg) no-repeat;
}
#film a b
{
display:none;
}
#film a img, #film a:visited img
{
display:none;
}
#film p
{
position:absolute;
margin:0;
bottom:5px;
left:0;
width:220px;
text-align:center;
color:#fff;
}
#film a, #film a:visited
{
position:absolute;
top:140px;
width:20px;
height:20px;
z-index:100;
cursor:default;
}
#film a#f1
{
left:0;
background:transparent url(f1.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f2
{
left:20px;
background:transparent url(f2.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f3
{
left:40px;
background:transparent url(f3.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f4
{
left:60px;
background:transparent url(f4.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f5
{
left:80px;
background:transparent url(f5.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f6
{
left:100px;
background:transparent url(f6.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f7
{
left:120px;
background:transparent url(f7.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f8
{
left:140px;
background:transparent url(f8.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f9
{
left:160px;
background:transparent url(f9.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f10
{
left:180px;
background:transparent url(f10.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f11
{
left:200px;
background:transparent url(f11.jpg) 0 -300px no-repeat;
z-index:100;
}
#film a#f1:hover,
#film a#f2:hover,
#film a#f3:hover,
#film a#f4:hover,
#film a#f5:hover,
#film a#f6:hover,
#film a#f7:hover,
#film a#f8:hover,
#film a#f9:hover,
#film a#f10:hover,
#film a#f11:hover {
text-decoration:none;
top:0;
left:0;
width:220px;
height:160px;
background-position:0 0;
z-index:50;
}
#film a:hover b
{
display:block;
position:absolute;
bottom:25px;
left:0;
width:220px;
text-align:center;
color:#ff0;
font-weight:normal;
}

XHTML

<html>
<body>
<div id='“film“‚ title=“CSS Animace“>
<a id=“f1″ href=“#“><img src=“http://css.interval.cz/f1.jpg“ title=“Snímek 1″ alt=“Snímek 1″ />Snímek 1</a>
<a id=“f2″ href=“#“><img src=“http://css.interval.cz/f2.jpg“ title=“Snímek 2″ alt=“Snímek 2″ />Snímek 2</a>
<a id=“f3″ href=“#“><img src=“http://css.interval.cz/f3.jpg“ title=“Snímek 3″ alt=“Snímek 3″ />Snímek 3</a>
<a id=“f4″ href=“#“><img src=“http://css.interval.cz/f4.jpg“ title=“Snímek 4″ alt=“Snímek 4″ />Snímek 4</a>
<a id=“f5″ href=“#“><img src=“http://css.interval.cz/f5.jpg“ title=“Snímek 5″ alt=“Snímek 5″ />Snímek 5</a>
<a id=“f6″ href=“#“><img src=“http://css.interval.cz/f6.jpg“ title=“Snímek 6″ alt=“Snímek 6″ />Snímek 6</a>
<a id=“f7″ href=“#“><img src=“http://css.interval.cz/f7.jpg“ title=“Snímek 7″ alt=“Snímek 7″ />Snímek 7</a>
<a id=“f8″ href=“#“><img src=“http://css.interval.cz/f8.jpg“ title=“Snímek 8″ alt=“Snímek 8″ />Snímek 8</a>
<a id=“f9″ href=“#“><img src=“http://css.interval.cz/f9.jpg“ title=“Snímek 9″ alt=“Snímek 9″ />Snímek 9</a>
<a id=“f10″ href=“#“><img src=“http://css.interval.cz/f10.jpg“ title=“Snímek 10″ alt=“Snímek 10″ />Snímek 10</a>
<a id=“f11″ href=“#“><img src=“http://css.interval.cz/f11.jpg“ title=“Snímek 11″ alt=“Snímek 11″ />Snímek 11</a>
<< Zde přejíždějte kurzorem >>
</div>
</body>
</html>