css做页面动画，页面未显示部分的动画不播放，当鼠标向下滑动页面出现后才展示动画。怎么做？

html-css022

css做页面动画，页面未显示部分的动画不播放，当鼠标向下滑动页面出现后才展示动画。怎么做？,第1张

这个css是实现不了的，你可以通过js或者jq来判断，屏幕滚动到某一点上的时候，给对应的元素加上动画类。

或者你还可以选着用现成的jQ插件来实现，页面滚到某一位置时，就会出现相应的动画，推荐你去百度搜一下 wow.js或则 aos.js

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

# image {

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

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

}

@keyframes falling {

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

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

}