动画库

最新推荐文章于 2025-09-24 13:56:34 发布

原创最新推荐文章于 2025-09-24 13:56:34 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

本文详细解析了动画效果的设计过程，从分析动画运动轨迹到利用CSS属性实现各种动画效果，如弹跳、闪烁、缩放及拉伸等。通过划分动画轨迹的百分比区间，调整属性值，创建生动的视觉体验。

动画分析过程
1.分析动画运动轨迹
2.想一下那些css 属性可以实现注意的效果
3.根据轨迹变化，进行百分比划分(不一定是等分)
划分方式，找到几个特殊的[峰值]，在峰值和峰值之间进行区分
4.在每个不同的百分比区间更改属性的值
5.如果是渐进式，值越来越小，直到回到最初的状态

    动画运动轨迹
    常用的： 平移  旋转   拉伸   显示隐藏： 透明度
<h1>展示自己的动画样式</h1>
<h2 class="zc-animation bounce infinite">Bounce弹跳动画</h2>
<br>
<h2 class="zc-animation flash delay-2s slower infinite">Flash闪烁动画</h2>
<br>
<h2 class="zc-animation flasher infinite">Flasher3频动画</h2>
<br>
<h2 class="zc-animation pules infinite ">pules缩放</h2>
<br>
<h2 class="zc-animation pulesFont infinite">pules缩放</h2>
<br>
<h2 class="zc-animation rubberBand infinite">rubberBand拉伸</h2>