css3animation例子
    CSS3 动画是在 HTML 元素中利用 CSS3 属性实现动态效果的技术。CSS3 动画可以创建过渡、旋转、缩放、透明度变化、背景颜变化等效果，使网页更加生动、有趣。
    下面介绍一些常用的 CSS3 动画例子。
    1. 过渡效果
    过渡效果可以实现某个属性的变化过程，比如改变元素的颜、大小、位置等。
    代码示例：
    ```
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: width 2s, height 2s, background-color 2s;
    }
    上面的示例中，当鼠标悬停在元素上时，元素的宽高和背景颜会在 2 秒的时间内变化。transition 属性用来设置过渡效果，后面跟随需要过渡的属性名称和时间。
    2. 旋转效果
    旋转效果可以让元素绕着中心点进行旋转，使其更具有视觉冲击力。
    .box:hover {
      transform: rotate(180deg);
    }
    ```
html动画效果    上面的示例中，当鼠标悬停在元素上时，元素将绕着中心点旋转 180 度。transform 属性用来设置旋转效果，rotate() 函数用来指定旋转的角度。
    3. 缩放效果
    缩放效果可以让元素按比例进行放大或缩小，非常适用于制作图片展示等场景。
    4. 透明度效果
    透明度效果可以让元素的不透明度发生变化，从而让元素变得半透明或完全透明。
    上面的示例中，当鼠标悬停在元素上时，元素将变成半透明状态。opacity 属性用来设置不透明度，可以是 0 到 1 范围内的值。
    5. 背景颜效果
    背景颜效果可以让元素的背景颜发生变化，非常适用于制作导航栏或按钮的鼠标悬停效果。
    上面的示例中，当鼠标悬停在元素上时，元素的背景颜将从蓝变成红。background-color 属性用来设置背景颜。
    总结
    以上就是几个常见的 CSS3 动画例子，当然还有很多其他的动画效果和组合方式可以实现。熟练掌握 CSS3 动画属性可以让我们制作更加生动、有趣的网页。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。