Javascript 小球内部的大球旋转动画

body {
  background-color: #272727;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
}

.circle {
  width: 82px;
  height: 82px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  top: 18px;
  animation: rotate 5s linear infinite;
  transform-origin: 50px 50px;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

<div class="line">
  <div class="circle"></div>
</div>

body {
  background-color: #272727;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  animation: rotate 5s linear infinite;
}

.circle {
  width: 82px;
  height: 82px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  top: 18px;
  transform-origin: 50px 50px;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

<div class="line">
  <div class="circle"></div>
</div>

Javascript相关问答推荐

如何解决(不忽略)reaction详尽的linter规则，而不会在获取数据时导致无限的reender循环

如何在不使用类型化数组的情况下将32位浮点数按位转换为整值？

Flisk和JS错误：未捕获的Syntax错误：意外的令牌'<'

在JavaScript中检索一些文本

容器如何更改默认插槽中子项的显示？

*ngFor和@代表输入decorator 和选角闭合

ReactJS中的material UI自动完成类别

. NET中Unix时间转换为日期时间的奇怪行为

TypeScript索引签名模板限制

当Redux提供程序访问Reduxstore 时，可以安全地从Redux提供程序外部调用钩子？

如何使用子字符串在数组中搜索重复项

Next.js服务器端组件请求，如何发送我的cookie token？

try 使用javascript隐藏下拉 Select

根据一个条件，如何从处理过的数组中移除一项并将其移动到另一个数组？

邮箱密码重置链接不适用于已部署的React应用程序

使用NextJS+MongoDB+Prisma ORM获取无效请求正文，无法发布错误

钛中的onClick事件需要在两次点击之间等待几秒钟

try 使用PM2在AWS ubuntu服务器上运行 node 进程时出错

在表单集中保存更改时删除'；禁用'；

react 路由如何使用从加载器返回的数据