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

答案:2 悬赏:30 手机版

解决时间 2021-03-21 12:54

提问者网友：战魂
2021-03-20 16:57

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

最佳答案

五星知识达人网友：山君与见山
2021-03-20 18:31

这个css是实现不了的，你可以通过js或者jq来判断，屏幕滚动到某一点上的时候，给对应的元素加上动画类。
或者你还可以选着用现成的jQ插件来实现，页面滚到某一位置时，就会出现相应的动画，推荐你去百度搜一下 wow.js 或则 aos.js

全部回答

1楼网友：煞尾
2021-03-20 19:59

我觉得你就是想要一个滑动门效果的源码吧，我现在就给你一个吧。 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" " <a href="http://wenwen.soso.com/z/urlalertpage.e?sp=shttp%3a%2f%2fwww.w3.org%2ftr%2fxhtml1%2fdtd%2fxhtml1-transitional.dtd%22%3e" target="_blank">http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"></a> <html xmlns=" <a href="http://wenwen.soso.com/z/urlalertpage.e?sp=shttp%3a%2f%2fwww.w3.org%2f1999%2fxhtml%22%3e" target="_blank">http://www.w3.org/1999/xhtml"></a> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>仿网易的滑动门技术，用div+css技术实现</title> <style type="text/css">  </style> </head> <body> <script language=javascript> function secboard(n) { for(i=0;i<menu.childnodes.length;i++) menu.childnodes[i].classname="sec1"; menu.childnodes[n].classname="sec2"; for(i=0;i<main.childnodes.length;i++) main.childnodes[i].style.display="none"; main.childnodes[n].style.display="block"; } </script> <div id="header"> <ul id="menu"> <li onmouseover="secboard(0)" class="sec2">最新新闻</li> <li onmouseover="secboard(1)" class="sec1">最新文章</li> <li onmouseover="secboard(2)" class="sec1">最新日志</li> <li onmouseover="secboard(3)" class="sec1">论坛新帖</li> </ul>  <ul id="main"> <li class="block">第一个内容</li> <li class="unblock">第二个内容</li> <li class="unblock">第三个内容</li> <li class="unblock">第四个内容</li> </ul>  </div> </body> </html>

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！