如何用html制作图片旋转动画

使用HTML和CSS的@keyframes规则创建动画，结合transform: rotate()属性实现图片旋转动画。将动画应用到图片元素上。

如何用HTML制作图片旋转动画

如何用html制作图片旋转动画

1、引入CSS样式

在HTML文件中，使用<style>标签引入CSS样式，可以定义一个类（class）来控制图片的旋转动画效果。

<style>
    @keyframes rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .rotate-image {
        animation: rotate 2s linear infinite;
    }
</style>

2、插入图片元素

在HTML文件中，使用<img>标签插入需要旋转的图片，为图片添加上一步定义的CSS类，以应用旋转动画效果。

<img src="your-image.jpg" alt="旋转图片" class="rotate-image">

3、调整动画效果

可以根据需要调整CSS样式中的动画属性，例如旋转角度、持续时间和循环次数等。

<style>
    @keyframes rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .rotate-image {
        animation: rotate 4s linear infinite; /* 修改旋转时间为4秒 */
    }
</style>