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

html-css029

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

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

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

像这种效果，你要想知道，

已经下载下来，你拆开看一下就知道了。

说说原理，这里并不是纯css3，，只是用css3定义好动画，

@-moz-keyframes tips {

0% {box-shadow: 0px 0px 0px #f00}

25% {box-shadow: 0px 0px 8px #f00}

50% {box-shadow: 0px 0px 0px #f00}

100% {box-shadow: 0px 0px 8px #f00}

}

然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。

.tips {

-webkit-animation:tips 1s

-moz-animation:tips 1s

}

当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。

这个得结合js来做的。比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可，而加的这个class就是带css3执行动画的 class

<div id="a1"></div>

<div id="a2"></div>

<div id="a3"></div>

//引入jQuery.js

<script>

var t1=$("#a1").offset().top

var t1=$("#a2").offset().top

var t1=$("#a3").offset().top

$(window).scroll(function(){

var top=$(window).scrollTop()

if(top>t1&&top<t2){

$("#a1").addClass("an1")

}

if(top>t2&&top<t3){

$("#a2").addClass("an1")

}

if(top>t3){

$("#a3").addClass("an1")

}

})

</script>