CSS3简单实现360deg旋转

最新推荐文章于 2025-07-07 10:12:19 发布

原创最新推荐文章于 2025-07-07 10:12:19 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css旋转动画

前端专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现一个无限旋转的盒子动画效果。通过定义关键帧动画，结合旋转变换，使得一个50x50像素的盒子在2秒内线性地完成360度旋转，并且动画可以无限次重复。此外，还讲解了如何在鼠标悬停时暂停动画，以及CSS动画属性的深入理解，包括animation-name、animation-duration、animation-timing-function等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    .stage{
        width: 200px;
        height: 200px;
        background-color: #acffa5;
    }
    .box1{
        width: 50px;
        height: 50px;
        background-color: #b2caff;

        animation: rotate  2s linear infinite;
    }

    .box1:hover{
        animation-play-state: paused;
    }
    @keyframes rotate {
        0%{
            transform: rotate(0);
        }
        100%{
            transform: rotate(360deg);
        }
    }


</style>
<body>

<div class="stage">
    <div class="box1"> 1</div>
</div>

</body>
</html>

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。阅读关于 initial的介绍。
inherit	从父元素继承属性。阅读关于 initinherital的介绍。