CSS 动画多帧 animation 旋转

最新推荐文章于 2025-06-19 09:17:33 发布

卋舉

最新推荐文章于 2025-06-19 09:17:33 发布

阅读量856

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 动画

本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120717213

CSS 专栏收录该内容

46 篇文章

订阅专栏

本文介绍如何使用CSS的animation属性创建一个无限循环的旋转动画，通过transform-origin控制旋转中心，并利用transform的rotate函数定义旋转角度，实现复杂的多帧旋转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画 animation;
一直 infinite;
控制中心点 transform-origin:right bottom;
变换 transform; 旋转 rotate

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 动画 animation;
        一直 infinite;
        控制中心点 transform-origin:right bottom;
     -->
    <style>
        h3 {
            width: 300px;
            background-color: aqua;
            /*动画 animation;一直 infinite*/
            animation: an1 1s infinite;
            /*控制中心点 origin*/
            /*transform-origin: right bottom;*/
            transform-origin: 350px 100px;
        }

        @keyframes an1 {
            to {
                /*变换 transform;旋转 rotate */
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<h3>Lorem ipsum.</h3>
</body>
</html>