css 怎么让图片一直旋转

最新推荐文章于 2024-06-20 04:45:00 发布

℡梦醒时分

最新推荐文章于 2024-06-20 04:45:00 发布

阅读量7.1k

点赞数 7

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/spc007spc/article/details/106136258

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述
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>