css3animation例子

2024年2月8日发(作者：)

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);

}

```

上面的示例中，当鼠标悬停在元素上时，元素将绕着中心点旋转 180 度。transform

属性用来设置旋转效果，rotate() 函数用来指定旋转的角度。

3. 缩放效果

缩放效果可以让元素按比例进行放大或缩小，非常适用于制作图片展示等场景。

4. 透明度效果

透明度效果可以让元素的不透明度发生变化，从而让元素变得半透明或完全透明。

上面的示例中，当鼠标悬停在元素上时，元素将变成半透明状态。opacity 属性用来设置不透明度，可以是 0 到 1 范围内的值。

5. 背景颜色效果

背景颜色效果可以让元素的背景颜色发生变化，非常适用于制作导航栏或按钮的鼠标悬停效果。

上面的示例中，当鼠标悬停在元素上时，元素的背景颜色将从蓝色变成红色。background-color 属性用来设置背景颜色。

总结

以上就是几个常见的 CSS3 动画例子，当然还有很多其他的动画效果和组合方式可以实现。熟练掌握 CSS3 动画属性可以让我们制作更加生动、有趣的网页。