html5 css3下拉 动画css怎么写

Posted 2023-04-24

参考技术A 大概的过程是这样的：

...

a(this).addClass("animated").find(".aninode").each(function()

a(this).addClass(a(this).attr("data-animate"))

)

...

页面滚动到每个 section 元素的时候，先给它加个名为 animated 的 class ，在这样的 section 内部找到 class 名为 aninode 的 div 元素。这样的 div 元素或者其内部的元素会有个 data-animate="a-****" 的属性。把这个属性的值，也就是 a-**** 也当做 class 名称传给这个 div 元素或者其内部的元素。这个 class 里面就包含有动画样式。也就是说，通过 class="animated" 当做钩子，有 animated 这个 class 的时候，名为 aninode 的 div 元素或者其内部的元素才会执行相关的动画效果。

动画效果的 CSS 样式在 core.js 里面。控制动画执行是在 baomi.js 里面。

其实这个页面可以再完善下 section 元素 move 出屏幕的时候，去掉 animated；当move 回来的时候再加上 animated。目前的情况是，滚动到页面最低下以后，再往上滚动页面，就看不见动画效果了本回答被提问者采纳 参考技术B 百度搜索”下拉动画插件“供你参考

怎么用js触发css3动画

参考技术A 你用CSS3的方式预先写好动画样式，不调用这个class,前端中设置鼠标经过增加一个class，这样鼠标指向的时候就有CSS3的动画，鼠标离开去除样式动画结束