AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

AOS – 另外一个独特的页面滚动动画库（CSS3）

2016-10-07 1937
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 　　AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。

　　AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。

 

 

 

马上去试试

　

您可能感兴趣的相关文章

 

本文链接：AOS – 另外一个独特的页面滚动动画库（CSS3）

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

文章标签：
JavaScript
前端开发
HTML5
移动开发
内存技术
关键词：
CSS页面
动画CSS
CSS动画
页面滚动CSS
CSS库
秋天风景
目录
相关文章
凉凉心.
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。 :hover 结构化伪类：会在标记中存在某种结构上的关系时 例如： 某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
凉凉心.
1023 2
dingtalk_pbspgm
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
dingtalk_pbspgm
708 143
不起名字可以不
|
11月前
|
自然语言处理 前端开发 JavaScript
用 通义灵码 一键生成“水波纹按钮”，连 CSS 动画都不用自己写了！
通义灵码是一款智能编程辅助工具，它可以根据自然语言指令自动生成高质量的代码。例如，只需输入“生成一个按钮，点击时带水波纹动画，模拟 Material Ripple 效果”，它就能生成具备完整交互逻辑、CSS 动画和良好性能的按钮组件。不仅如此，它还支持拓展功能，如长按触发提示、添加图标等，并能自动优化样式适配不同场景。通过通义灵码，开发者可以大幅提升效率，专注于创意实现，而不必纠结于繁琐的代码细节。
不起名字可以不
573 1
凉凉心.
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下： 属性名 属性值 animation-name 指定动画名称，该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation：这是一个复合属性。
凉凉心.
519 3
html的七十二变
|
前端开发 JavaScript 开发者
前端 CSS 优化：提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器（如避免复杂后代选择器、减少通用选择器使用）、合并样式表、合理组织媒体查询，可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率，确保动画流畅。定期清理冗余代码并使用缩写属性，进一步精简代码。这些策略不仅加快页面加载和渲染速度，还提升了视觉效果，为用户带来更优质的浏览体验。
html的七十二变
676 9
dingtalk_pbspgm
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果？
如何使用CSS过渡实现页面元素的淡入淡出效果？
dingtalk_pbspgm
672 79
卓伊凡
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
892 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
795 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
1235 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
疯狂的猿
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
疯狂的猿
309 34