如何用css制作图片自上而下落下来的动画？

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

# image {

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

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

}

@keyframes falling {

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

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

}

首先这个问题是一个web开发方面的专业性问题。我们抛开这个专业性，从题目中我们要弄清两个名词，什么是css，什么是动画

css：CascadingStyleSheets（层叠样式表），是一种用来表现HTML或XML等文件样式的计算机语言，在程序员眼中，甚至称不上是语言。

动画：采用逐帧拍摄对象并连续播放而形成运动的影像技术，计算机中的动画也是如此，逐帧播放，每一帧有个元素形态，然后组合起来。

理解了上面的概念，我们再去谈谈用css制作动画，css3之前的版本是不可能用纯css制作动画，需要配合js一起才能制作，通过js控制元素每帧的形态，直到css3这个版本出来，才有纯css3制作一些常见的简单的动画，其中有3个动画属性：变形(transform)、转换(transition)和动画(animation)，具体教程网上比较多，内容解说代码也比较多，这里省略，

下面说一下制作动画的步骤：一：自己要清楚自己所要做的动画的一个整体形态，首先就是要建模二：拆分动画形态，就是每帧的形态，或者是一个时长动画的开始和结束形态，中间过程的变化形态。三：通过css动画属性进行编码出这些形态。如果是复杂的，用css配合js编写出来即可。

---