jquery 圆圈转动代码

jQuery 圆圈转动效果通常是通过 CSS 动画或者 jQuery 动画插件来实现的。下面我将提供一个简单的示例，展示如何使用 jQuery 和 CSS 来创建一个圆圈转动的效果。

基础概念

CSS 动画允许开发者通过关键帧来定义动画效果，而 jQuery 则可以用来操作 DOM 元素，包括添加、删除或修改元素的样式。

类型

CSS 动画：使用 @keyframes 规则定义动画。
jQuery 动画：使用 .animate() 方法来实现动画效果。

应用场景

这种效果常用于网站的加载动画、图标动画或者任何需要视觉反馈的地方。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Spin Animation</title>
<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // 使用 jQuery 监听按钮点击事件，开始动画
    $('#startSpin').click(function() {
      $('.circle').addClass('spin');
    });

    // 停止动画
    $('#stopSpin').click(function() {
      $('.circle').removeClass('spin');
    });
  });
</script>
</head>
<body>

<div class="circle"></div>
<button id="startSpin">开始转动</button>
<button id="stopSpin">停止转动</button>

</body>
</html>