当前位置： 首页 > news >正文

css实现圆周运动效果

news 2026/5/20 14:21:03

在CSS中可以通过 @keyframes 动画 和 transform 属性实现元素的圆周运动。以下是一个示例代码：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS圆周运动</title>
<style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background: #f4f4f4;}.orbit {position: relative;width: 200px;height: 200px;border: 1px dashed #aaa; /* 可选，显示圆的轨迹 */border-radius: 50%; /* 圆形轨道 */}.object {position: absolute;width: 20px;height: 20px;background: red;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: circular-motion 4s linear infinite;}@keyframes circular-motion {0% {transform: translate(-50%, -50%) rotate(0deg) translateX(100px);}100% {transform: translate(-50%, -50%) rotate(360deg) translateX(100px);}}
</style>
</head>
<body><div class="orbit"><div class="object"></div></div>
</body>
</html>

在这里插入图片描述

代码解析

  1. 轨道 (.orbit):

    • 设置了一个圆形轨道，大小为 200px，使用 border-radius: 50% 使其变成一个圆形。

  2. 运动物体 (.object):

    • 起始位置在轨道顶部，通过 position: absolute 定位。
    • 使用 transform: translate(-50%, -50%) 确保其中心点对齐。

  3. 动画 (@keyframes circular-motion):

    • 利用 rotate 实现旋转运动，中心点是容器的中心。
    • translateX(100px) 确保元素始终距离圆心一定距离。

  4. 无缝循环:

    • 设置动画为 linear infinite，让物体匀速持续旋转。

你可以调整以下参数来修改效果：

  • 调整轨道大小：修改 .orbit 的 width 和 height。
  • 调整运动速度：更改 animation 的持续时间，如 4s。
  • 改变运动距离：更改 translateX 的值。

相关文章：

css实现圆周运动效果

在CSS中可以通过 keyframes 动画 和 transform 属性实现元素的圆周运动。以下是一个示例代码&#xff1a; 示例代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content…...

编程日记 2024/12/6 21:58:34

【NoSQL数据库】MongoDB数据库——集合和文档的基本操作（创建、删除、更新、查询）

目录 一、MongoDB数据库原理 二、MongoDB数据库和集合基本操作&#xff08;增删改查&#xff09; 三、MongoDB数据库的文档基本操作&#xff08;增删改&#xff09; 四、学习笔记 往期文章&#xff1a;【NoSQL数据库】MongoDB数据库的安装与卸载-CSDN博客 一、MongoDB数据…...

编程日记 2024/12/6 21:54:31

Dart 学习笔记（一）

一、数据类型 数值类型 int&#xff1a;表示整数类型&#xff0c;例如&#xff1a;int num 10;。在 Dart 中&#xff0c;int 类型是有范围限制的&#xff0c;具体取决于平台&#xff0c;但通常在 -2^63 到 2^63 - 1 之间。double&#xff1a;表示双精度浮点数类型&#xff0c…...

编程日记 2024/12/6 21:53:29

安防视频监控平台Liveweb视频汇聚管理系统管理方案

智慧安防监控Liveweb视频管理平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚Liveweb平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、…...

编程日记 2024/12/6 21:50:26

十八(GIT)、GIT基本命令、axios别名方法、黑马就业数据平台(axios基地址、轻提示函数、注册及登录功能)

1. GIT 1.1 Git配置用户信息 1. Git配置用户信息 git config --global user.name "用户名" git config --global user.email 邮箱地址 2. 查看配置 git config --list (信息太多使用 输入 q 退出) 1.2 本地初始化Git仓库 1. 通常有两种获取Git仓库的方式: 将 尚未进…...

编程日记 2024/12/6 21:46:23

Linux查看系统基本信息

执行命令 chmod x system_info.sh && ./system_info.sh文件名&#xff1a;system_info.sh #!/bin/bash# 获取系统版本 SYSTEM_VERSION$(cat /etc/os-release | grep ^PRETTY_NAME | cut -d -f 2 | xargs)# 获取CPU数量 CPU_COUNT$(grep -c ^processor /proc/cpuinfo…...

编程日记 2024/12/6 21:45:20

Word处理表格的一些宏

目录 1、表格首行居中2、表格内容靠左上下居中&#xff08;排除首行&#xff09; 1、表格首行居中 说明&#xff1a; 遇到错误将进行捕获&#xff0c;然后继续处理下一个表格 宏&#xff1a; Sub 表格首行居中()Dim tbl As tableOn Error Resume Next 错误时继续执行下一个…...

编程日记 2024/12/6 21:44:19

将本地项目文件推送到Git仓库中

一、在GitLab中创建新项目 1. 创建新项目 2. 打开本地文件. 3. 项目git文件操作 初始化本地Git仓库 git init关联远程仓库 git remote add origin 远程仓库地址将文件到Git暂存区 git add .提交项目文件到Git本地仓库 git commit -m "提交内容说明"将本地…...

编程日记 2024/12/6 21:43:17

2024-12-05OpenCV高级-滤波与增强

OpenCV高级-滤波与增强 文章目录 OpenCV高级-滤波与增强1-OpenCV平滑滤波1. 均值滤波 (cv2.blur())2. 高斯滤波 (cv2.GaussianBlur())3. 中值滤波 (cv2.medianBlur())4. 双边滤波 (cv2.bilateralFilter())总结 2-OpenCV边缘检测1. Sobel算子 (cv2.Sobel())2. Canny边缘检测 (cv…...

编程日记 2024/12/6 21:42:15

vue3中 axios 发送请求 刷新token 封装axios

service.js 页面 import axios from axios // 创建axios实例 const instance axios.create({baseURL: http://gcm-test.jhzhkj.cn:8600/h5card/,timeout: 5000, // 请求超时时间headers: {get: {Content-Type: application/x-www-form-urlencoded},post: {Content-Type: appl…...

编程日记 2024/12/6 21:41:14

aardio - 汉字笔顺处理 - json转sqlite转png

本代码需要最新版 godking.conn 库&#xff0c;请自行下载&#xff01; 如果没有安装 odbc for sqlite 驱动&#xff0c;可以使用 godking.conn.driver.sqlite3.install() 安装。 也可以在此下载自行安装&#xff1a;http://www.chengxu.online/show.asp?softid267 1、将js…...

编程日记 2024/12/6 21:40:13

数据结构学习笔记 双向链表

……接上文 6. 双向链表 6.1 特性 逻辑结构&#xff1a;线性结构 存储结构&#xff1a;链式结构 操作&#xff1a;增删改查 建立双向链表结构体&#xff1a; //双向链表的节点定义 typedef int datatype;typedef struct node_t{datatype data;//数据域 struct node_t *next;//…...

编程日记 2024/12/6 21:38:10

深度学习作业十 BPTT

目录 习题6-1P 推导RNN反向传播算法BPTT. 习题6-2 推导公式(6.40)和公式(6.41)中的梯度&#xff0e; 习题6-3 当使用公式(6.50)作为循环神经网络的状态更新公式时&#xff0c; 分析其可能存在梯度爆炸的原因并给出解决方法&#xff0e; 习题6-2P 设计简单RNN模型&#xff0…...

编程日记 2024/12/6 21:37:08

html+css+JavaScript实现轮播图

html+css+JavaScript实现轮播图 实现思路 要实现一个轮播图功能，我们需要HTML来构建结构，CSS来设计样式，以及JavaScript来添加交互功能。下面我将分别分析这三个部分是如何协同工作来实现轮播图的。 HTML - 结构 HTML部分定义了轮播图的基本结构，包括图片列表、指示器和…...

编程日记 2024/12/6 21:34:02

Python+onlyoffice 实现在线word编辑

onlyoffice部署 version: "3" services:onlyoffice:image: onlyoffice/documentserver:7.5.1container_name: onlyofficerestart: alwaysenvironment:- JWT_ENABLEDfalse#- USE_UNAUTHORIZED_STORAGEtrue#- ONLYOFFICE_HTTPS_HSTS_ENABLEDfalseports:- "8080:8…...

编程日记 2024/12/6 21:33:00

PostgreSQLt二进制安装-contos7

1、安装依赖 yum install -y gcc readline readline-devel zlib-devel net-tools perl wget numactl libicu-devel bison flex openssl-devel pam pam-devel libxml2 libxml2-devel libxslt libxslt-devel openldap openldap-devel 2、创建目录 mkdir -p /data/postgresql/{…...

编程日记 2024/12/6 21:29:56

Neo4j启动时指定JDK版本

项目使用jdk1.8&#xff0c;同时需要安装neo4j5.15版本&#xff0c;使用jdk17. 1.mac或者liunx&#xff0c;找到neo4j目录bin的下neo4j文件 设置JAVA_HOME: 2.windows,找到bin下面的neo4j.bat文件 set "JAVA_HOME{JDK文件目录}" 重启后生效。...

编程日记 2024/12/6 21:26:51

kanzi3.6.10 窗口插件-美化绑定内容

文章目录 1. 创建kanzi窗口插件2. 业务逻辑3. 关键代码3.1 获取绑定信息3.2 解析绑定3.3 动态生成富文本控件 4. 安装 背景&#xff1a;kanzi的节点绑定信息是黑色的&#xff0c;看起来非常费劲&#xff0c;如果能代码高亮显示&#xff0c;对开发会很有帮助。 美化前 美化后 …...

编程日记 2024/12/6 21:20:41

利用tablesaw库简化表格数据分析

tableaw是处理表格数据的优秀工具。它提供了一组强大而灵活的功能&#xff0c;使操作、分析和可视化数据表变得容易。在这篇博文中&#xff0c;我们将介绍tableaw的主要特性、如何使用这些特性&#xff0c;以及如何使用tableaw处理表格数据的一些示例。 tablesaw简介 tableaw…...

编程日记 2024/12/6 21:19:40

记录一下，解决js内存溢出npm ERR! code ELIFECYCLEnpm ERR! errno 134 以及 errno 9009

项目是个老项目&#xff0c;依赖包也比较大&#xff0c;咱就按正常流程走一遍来详细解决这个问题&#xff0c;先看一下node版本&#xff0c;我用的是nvm管理的&#xff0c;详细可以看我的其他文章 友情提醒&#xff1a;如果项目比较老&#xff0c;包又大&#xff0c;又有一些需…...

编程日记 2024/12/6 21:18:37

蓝桥杯单片机备赛：AT24C02读写避坑指南（附STC15完整工程）

蓝桥杯单片机备赛&#xff1a;AT24C02读写避坑指南&#xff08;附STC15完整工程&#xff09; 在蓝桥杯单片机竞赛中&#xff0c;AT24C02这颗小小的EEPROM芯片常常成为决定胜负的关键。作为参赛选手&#xff0c;你可能已经掌握了I2C协议的基本原理&#xff0c;但在紧张的比赛环境…...

编程新知 2026/5/20 13:30:36

2.1 C语言 ECG模块设计（推送）

文章目录1. 目标&#xff1a;2. 功能需求&#xff1a;3. 概要设计&#xff1a;3.1 系统架构&#xff1a;3.2 组件设计&#xff1a;4. 详细设计4.1 ECG_Module&#xff1a;4.1.1 职责&#xff1a;4.1.2 属性&#xff1a;4.1.3 方法&#xff1a;4.2 TMDQueue&#xff1a;4.2.1 职…...

编程新知 2026/5/20 13:01:51

fpga开发过程中遇到的一些小问题

vivado开发过程中的一些error1、[Chipscope 16-213] The debug port u_ila_0/probe13 has 28 unconnected channels (bits). This will cause errors during implementation.2、ERROR: [Labtools 27-3312] Data read from hw_ila [hw_ila_1] is corrupted. Unable to upload wa…...

编程新知 2026/5/20 12:59:46

别再只盯着Transformer了！用PyTorch手把手复现加性注意力（Additive Attention），理解注意力机制的起点

从加性注意力到Transformer&#xff1a;PyTorch实战与演进逻辑解析 在Transformer架构横扫NLP领域的今天&#xff0c;回望2014年提出的加性注意力机制&#xff08;Additive Attention&#xff09;&#xff0c;犹如在摩天大楼顶端俯瞰地基。这个由Bahdanau在神经机器翻译中首次提…...

编程新知 2026/5/20 12:37:37

3分钟搞定B站缓存视频转换：m4s-converter无损合并完整指南

3分钟搞定B站缓存视频转换&#xff1a;m4s-converter无损合并完整指南 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾经遇到过这样的情…...

编程新知 2026/5/20 11:24:56

TrollInstallerX完整教程：3分钟搞定iOS越狱神器TrollStore一键安装

TrollInstallerX完整教程&#xff1a;3分钟搞定iOS越狱神器TrollStore一键安装 【免费下载链接】TrollInstallerX A TrollStore installer for iOS 14.0 - 16.6.1 项目地址: https://gitcode.com/gh_mirrors/tr/TrollInstallerX 还在为iOS设备上安装TrollStore而烦恼吗&…...

编程新知 2026/5/20 11:20:34

前端工程化实战：代码规范、兼容性、调试与项目整合

前言学完 HTML 和 CSS 的核心知识后&#xff0c;如何写出规范、可维护、兼容性好的代码&#xff0c;并高效地调试和构建项目&#xff0c;是很多初学者的薄弱环节。本篇整合 代码书写规范、浏览器兼容性处理、Chrome DevTools 调试技巧、项目目录结构 以及 前端学习路径 等实用技…...

编程新知 2026/5/20 11:09:21

LabVIEW字符串处理保姆级教程：从长度计算到日期格式化，13个实例带你玩转

LabVIEW字符串处理实战指南&#xff1a;从基础操作到高级应用 在工业自动化、测试测量和仪器控制领域&#xff0c;LabVIEW作为图形化编程的标杆工具&#xff0c;其字符串处理能力直接影响着数据解析、通信协议实现等核心功能。本文将通过13个典型场景&#xff0c;系统讲解如何高…...

编程新知 2026/5/20 11:08:54

LLaMA论文里的三个关键技术点：SwiGLU、RoPE和RMSNorm，到底在解决什么问题？

LLaMA架构三大核心技术解析&#xff1a;SwiGLU、RoPE与RMSNorm的工程智慧 当ChatGPT掀起大模型浪潮时&#xff0c;Meta开源的LLaMA系列却以更小的参数量展现出惊人性能。这背后离不开三个关键技术点的精妙设计&#xff1a;SwiGLU激活函数、旋转位置编码(RoPE)和RMSNorm层归一化…...

编程新知 2026/5/20 10:42:29

嵌入式Linux驱动开发pinctrl篇（1）——从寄存器到子系统：驱动演进之路

嵌入式Linux驱动开发pinctrl篇&#xff08;1&#xff09;——从寄存器到子系统&#xff1a;驱动演进之路 仓库已经开源&#xff01;所有教程&#xff0c;主线内核移植&#xff0c;跑新版本imx-linux/uboot都在这里&#xff0c;或者一起来尝试跑7.0的Linux&#xff01;欢迎各位大…...

编程新知 2026/5/20 9:30:10