CSS动画：旋转动画


在这里插入图片描述

1
2
3
4
<div>
    <img class="jzxz1" src="images/jzxz1.png">
    <img class="jzxz2" src="images/orange.png">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
        .jzxz1 {<!-- -->
            animation: xz1 8s infinite linear;
        }

        @keyframes xz1 {<!-- -->
            from {<!-- -->
                transform: rotate(0deg);
            }
            50% {<!-- -->
                transform: rotate(180deg);
            }
            to {<!-- -->
                transform: rotate(360deg);
            }
        }

        .jzxz2 {<!-- -->
            animation: xz2 7s infinite linear;
        }

        @keyframes xz2 {<!-- -->
            from {<!-- -->
                transform: rotate(0deg);
            }
            50% {<!-- -->
                transform: rotate(-180deg);
            }
            to {<!-- -->
                transform: rotate(-360deg);
            }
        }

Done!