[分享]css3怎么让图片动起来

CSS3是前端开发中的一种重要技术，它可以实现许多酷炫的动画效果。本文将介绍如何使用CSS3让图片动起来。/ CSS3实现图片旋转动画 / img { transition: transform .3...

CSS3是前端开发中的一种重要技术，它可以实现许多酷炫的动画效果。本文将介绍如何使用CSS3让图片动起来。

/* CSS3实现图片旋转动画 */
img {
    transition: transform .3s ease-in-out; /* 定义变形效果，时长.3秒，缓动函数ease-in-out */
}
img:hover {
    transform: rotate(360deg); /* 定义鼠标悬停效果，旋转360度 */
} 

以上是一个简单的CSS3代码片段，实现了鼠标悬停图片旋转效果。此外，CSS3还可以实现其他多种动画效果。

/* CSS3实现图片闪烁动画 */
@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
img {
    animation: flash 2s infinite; /* 定义动画，时长2秒，无限循环 */
} 

以上CSS3代码片段实现了图片闪烁动画，使用了关键帧动画（@keyframes），定义了从不透明，到30%透明，再到不透明的动画过程。同时，使用animation属性将该动画效果应用于图片，并定义了该动画效果的时长和循环次数。

通过以上两个例子，小编相信大家已经对CSS3实现图片动画效果有了初步了解。当然，CSS3还有很多其他动画效果，比如缩放、抖动、滑动等等，可以根据不同的需求选择不同的效果。