几张图片竖着的让随滚动条下滑 用CSS

html-css09

几张图片竖着的让随滚动条下滑 用CSS,第1张

<div id="colee_right" >

<ul>

<li><img></li>

<li><img></li>

<li><img></li>

</ul>

</div>

用下面的样式

#colee_right{

bottom:20px

display:block

height:100px

position:fixed

right:20px

width:100px

}

具体的宽度和位置你自己调整

background:url(images/loginbackground.png)top no-repeat 0px 10px

等同与

background:url(images/loginbackground.png)top no-repeat

background-position: 0px 10px//水平方向(以左上角为原点，x方向)移动 0像素，垂直方向（y轴方向）即向下以动 10 像素

***注意：0px 不能省略，否则默认为x方向移动的距离。也可以设置为百分比值。

修改后：

可以使用CSS中的animation属性和@keyframes规则来实现图片自上而下落下来的动画效果。例如：

# image {

position: relative//图片的相对位置

animation: falling 1s linear//动画名称为falling，持续时间1s，动画速度变化线性

}

@keyframes falling {

0% { top: 0px} //初始时图片位于顶部

100% { top: 300px} //最终时图片位于300px处

}