css 怎么让图片一直旋转

效果

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        @-webkit-keyframes rotation {

            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
            }

        }
		//兼容不同版本浏览器
		//3s 为转速 值越小 速度越快
        .tp {

            -webkit-transform: rotate(360deg);

            animation: rotation 3s linear infinite;

            -moz-animation: rotation 3s linear infinite;

            -webkit-animation: rotation 3s linear infinite;

            -o-animation: rotation 3s linear infinite;

        }
    </style>
</head>

<body>
    <div>

        <img class="tp" src="images/fs.png" width="500" height="500" />

    </div>
</body>

</html>

你可能感兴趣的:(CSS)