CSS 动画 PNG

在网页制作中，CSS 动画能够为网页注入生机，使用户的交互体验更加丰富，图片的使用也是网页制作中必不可少的元素。本文将为你介绍如何利用 CSS 动画处理 PNG 图片。

PNG 图片

PNG 图片是目前较为常见的一种网络图片格式，与 JPEG 和 GIF 相比，它具有透明背景、高清晰度等特点。在网页中，PNG 格式的图片具有更好的显示效果。在 CSS 编写过程中，我们需要用到 PNG 图片来配合实现动画效果。

CSS 动画

CSS 动画是利用 CSS 样式属性，使元素从一种样式变换成另一种样式，实现动态交互效果的一种技术。其优势在于无需使用 JavaScript 或 Flash 即可实现动画效果，因此压缩后的文件大小更小。

CSS 动画可利用 transition 或 animation 属性：

transition

transition 可以用于实现简单的过渡动画效果，如滑动、颜色渐变、缩放等。以下是一个使用 transition 实现的 PNG 图片动画：

.img {
    width: 200px;
    height: 100px;
    background: url(./img/png-img.png) no-repeat;
    transition: width .5s, height .5s;
}

.img:hover {
    width: 400px;
    height: 200px;
}

以上代码使用 transition 实现了当鼠标悬停在图片上时，图片 size 放大的效果。

animation

animation 可以实现复杂的动画效果，如旋转、移动、缩放、渐变等等。以下是一个使用 animation 实现的 PNG 图片动画：

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.img {
    background: url(./img/png-img.png) no-repeat;
    width: 200px;
    height: 200px;
    animation: rotate 3s linear infinite;
}

以上代码使用 animation 实现了 PNG 图片旋转的效果。

总结

CSS 动画 png 是一种将 CSS 动画技术应用于 PNG 图片的方法，可以为网页带来更加丰富的交互效果，是网页制作应用的重要组成部分。在此先介绍到这里，接下来可以开始自己的实践和学习。