因此说，你的问题有一定的歧义的。
css3还有一种方法可以实现滚动。就是使用过度效果（transition），他也可以实现滚动的效果。而且，个人感觉比较符合你的意思。
其具体的做法是，给超链接滑过状态一个图片属性，如：
li a img {margin-top:0px}
li a:hover img {margin-top:-20px}
li a img {-webkit-transition: margin-top 0.5s}/*注意这里的hack，照顾多个浏览器*/
这样，鼠标滑上图片，图片就会动画向上滑动20像素，鼠标离开，又滑下来。
再扯下严格意义的【动态滚动的图片】，一般的解释是一组图片可以在某个区域内动画滑动。注意是一组。css通常不具有处理多组图片（也有css模拟动画帧的效果的）的效果。动态滚动图片常见的有2种，一种是可控制的滚动列表，一种是自动无限循环滚动。通常用来作为滚动新闻、组图或相册（风采）使用。
HTML代码在HTML中，这个例子是非常简单的，我们只需要的是一个H1和header标签。下面再加一张图片来测试页面滚动的效果。
<header><h1>Sticky Header</h1></header><img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery代码
CSS过渡是处理我们粘头的动画部分的最佳方式。所以我们使用jQuery来检测窗口的滚动位置。 当窗口的滚动位置大于1，这意味着用户向下滚动，那么我们要添加’stycky’类中的header 否则，我们就删除它（如果它存在）。
这些都意味着我们能把头部的样式应用在基于’stycky’的类中。
$(window).scroll(function() {if ($(this).scrollTop() >1){ $('header').addClass("sticky")} else{ $('header').removeClass("sticky")}})
需要注意的一点是，以这种方式使用jQuery的优雅降级（graceful degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复）如果禁用JavaScript，导航仍然可以工作，但是顶部只会使用非粘性的默认状态样式。
CSS代码
我们用CSS来样式化两种不同的状态，默认状态，和粘性状态并在两种状态之间转换。
首先，添加一些简单的样式，改善头部的外观：
header { position : fixed width : 100 % text-align : center font-size : 72 px line-height : 108 px height : 108 px background : #335C7D color : #fff font-family : 'PT SANS“ }
现在到了有趣的部分：当用户向下滚动，’sticky‘类将会被应用，我们现在可以用顶部风格的不同来反映新页面上的优先级。我们还可以设置位置固定，以便当页面滚动时不会改变定位。
还有几件事情我们可能要做：第一，我们要改变字体大小，以便它使用更少的屏幕空间；第二改变背景颜色和对齐到左边，这样在视觉上不会过多干扰：
header .sticky { font-size : 24 px line-height : 48 px height : 48 px background : #efc47D text-align : left padding-left : 20 px }
当然，你改变什么样式取决于你想要达到的前端设计。你可以改成任何你喜欢的样式。
如果你现在测试一下，你会看到当我们向下滚动时标题在变化。
现在，头部动态的变化需要我们设置一个过渡，像这样：
transition: all 0.4s ease
结论
用CSS3去创建这个动态头部和用jQuery去切换类是非常简单的，这些在你的网站设计中都能增加良好的用户体验。
更重要的是，代码优雅降级，使网站的设计实现的更加完美。
css3中的变形Chrome和safai需前缀加-webkit-，Foxfire需加前缀-moz-
1,旋转 rotate()
div{
width: 300px
height: 300px
transform:rotate(20deg)
}
2,扭曲 skew()
div {
width: 300px
height: 300px
transform:skew(45deg,-10deg)
}
3,缩放 scale()
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
也可以只缩放 x轴，或只缩放y轴。
div {
width: 200px
height: 200px
background: orange
}
.wrapper div:hover {
opacity: .5
transform: scale(0.8)
}
4,位移 translate()
translate()函数可以将元素向指定的方向移动，类似于position中的relative。
或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，
而不影响在X、Y轴上的任何Web组件。
5，原点 transform-origin
CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素
原点不在元素的中心位置，以达到需要的原点位置。
div {
transform: skew(45deg)
transform-origin:top
}
6,过渡
div {
width: 200px
height: 200px
background: red
margin: 20px auto
-webkit-transition-property: all
transition-property: all //指定过渡或动态模拟的css属性 （all是指所有）
-webkit-transition-duration:5s
transition-duration:5s //指定完成过渡的时间
-webkit-transition-timing-function: linear
transition-timing-function: linear//指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1
-webkit-transition-delay: .18s
transition-delay:.18s //指定开始出现的延迟时间
}
div:hover {
width: 400px
height:400px
}
7，Keyframes被称为关键帧，css3中以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{...}”
@keyframes changecolor{
0%{
background: red
}
20%{
background:blue
}
40%{
background:orange
}
60%{
background:green
}
80%{
background:yellow
}
100%{
background: red
}
}
div {
width: 300px
height: 200px
}
div:hover {
animation: changecolor 5s ease-out .2s
}
等价于
div:hover{
animation-name:changecolor
animation-duration:5s
animation-timing-function:ease-out
animation-delay:1
animation-iteration-count:infinite//动画播放次数 整数。
animation-play-state:paused//主要用来控制元素动画的播放状态。
animation-direction:alternate//动画方向，normal每次循环向前，alternate偶次向前，奇数相反。
animation-fill-mode: both//设置动画时间外属性none、forwards、backwords和both
}
