css实现圆周运动效果

在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,让物体匀速持续旋转。

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

  • 调整轨道大小:修改 .orbitwidthheight
  • 调整运动速度:更改 animation 的持续时间,如 4s
  • 改变运动距离:更改 translateX 的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63082.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker run 设置启动命令

在使用 docker run 命令时&#xff0c;你可以通过指定启动命令来覆盖 Docker 镜像中的默认入口点或命令。具体来说&#xff0c;你可以通过以下两种方式来设置启动命令&#xff1a; 覆盖 CMD&#xff1a; 你可以通过在 docker run 命令的最后部分提供命令来覆盖镜像的默认 CMD 指…

QT QML Text, TextInput, TextFiled, TextArea缩略符号无法显示的问题?无法换行?

经常在使用Text或者其他文字控件时,文字缩略符号无法显示或者文字内容超出控件之外,就是不能换行和显示缩略符?其实,对于控件来说,换行和缩略符最重要的就是要明确控件的宽度,如果控件不给出宽度,文字就不会换行或者缩略显示。但是有一些情况下,我们排版时,不能够明确…

四、自然语言处理_02RNN基础知识笔记

1、RNN的定义 RNN&#xff08;Recurrent Neural Network&#xff0c;循环神经网络&#xff09;是一种专门用于处理序列数据的神经网络架构&#xff0c;它与传统的前馈神经网络&#xff08;Feedforward Neural Network&#xff09;不同&#xff0c;主要区别在于它能够处理输入数…

高性能MySQL-优化服务器设置

优化服务器设置 1、MySQL的配置是如何工作的1.1 MySQL配置文件1.2 语法、作用于和动态性1.3 设置变量的副作用 2、不可取的调整参数方法3、配置内存使用3.1 每个连接的内存需求3.2 为操作系统保留内存3.3 InnoDB缓冲池3.4 线程缓存3.4.1 MySQL线程池相关配置参数3.4.2 MySQL线程…

通过docker 搭建jenkins环境;

一、官网简介使用安装说明: How to use this image docker run -p 8080:8080 -p 50000:50000 jenkins This will store the workspace in /var/jenkins_home. All Jenkins data lives in there - including plugins and configuration. You will probably want to make that …

Ubuntu 22.04.5 + kubeadm:Kubernetes v1.28.2集群部署企业实战

文章目录 Ubuntu 22.04.5 kubeadm&#xff1a;Kubernetes v1.28.2集群部署企业实战一、环境准备1.1 机器规划1.2 环境配置1.2.1 设置主机名1.2.2 安装依赖工具1.2.3 配置时间同步1.2.4 关闭swap分区1.2.5 停止和禁用防火墙1.2.6 配置内核转发及网桥过滤1.2.7 安装配置ipset及i…

【ElasticSearch】倒排索引与ik分词器

ElasticSearch&#xff0c;简称ES(后文将直接使用这一简称)&#xff0c;是一款卓越的开源分布式搜索引擎。其独特之处在于其近乎实时的数据检索能力&#xff0c;为用户提供了迅速、高效的信息查询体验。 它能够解决全文检索&#xff0c;模糊查询、数据分析等问题。那么它的搜索…

uni-app写的微信小程序如何实现账号密码登录后获取token,并且每天的第一次登录后都会直接获取参数而不是耀重新登录(1)

uni-app写的微信小程序如何实现账号密码登录后获取token&#xff08;而token的有效器一般是30分钟&#xff0c;当页面在操作时token是不会过去&#xff0c;&#xff0c;离开页面第二天登录时token就是过期状态&#xff0c;因为记住了账号密码就不会操作再次登录&#xff0c;但是…

SpringCloud框架学习(第七部分:分布式事务Seata)

目录 十五、SpringCloud Alibaba Seata处理分布式事务 1.分布式事务背景 2.Seata简介 &#xff08;1&#xff09;介绍 &#xff08;2&#xff09;工作流程 &#xff08;3&#xff09;各事务模式 &#xff08;4&#xff09;下载安装 3.Seata案例实战-数据库和表准备 …

apache中的Worker 和 Prefork 之间的区别是什么?

文章目录 内存使用稳定性兼容性适用场景 Apache中的Worker和Prefork两种工作模式在内存使用、稳定性以及兼容性等方面存在区别 内存使用 Worker&#xff1a;由于使用线程&#xff0c;内存占用较少。Prefork&#xff1a;每个进程独立运行&#xff0c;内存消耗较大。 稳定性 W…

[C#] 对24位图像进行水平翻转(FlipX)的跨平台SIMD硬件加速向量算法(使用YShuffleX3Kernel)

文章目录 一、标量算法1.1 算法实现1.2 基准测试代码 二、向量算法2.1 算法思路2.1.1 难点说明2.1.2 解决办法&#xff1a;每次处理3个向量2.1.3 用YShuffleX3Kernel对3个向量内的24位像素进行翻转 2.2 算法实现2.3 基准测试代码2.4 使用 YShuffleX3Kernel_Args 来做进一步的优…

python打包深度学习虚拟环境

今天师兄让我把环境打包发给他&#xff0c;我才知道可以直接打包深度学习虚拟环境&#xff0c;这样另一个人就不用辛辛苦苦的去装环境了&#xff0c;我们都知道有些论文他需要的环境很难装上。比如装Apex&#xff0c;装 DCN&#xff0c;mmcv-full 我现在把3090机子上的ppft虚拟…

基于MobileNet深度学习网络的MQAM调制类型识别matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a 3.部分核心程序 &#xff08;完整版代码包含详细中文注释和操作步骤视频&#xff09…

Ceph分布式存储集群搭建

一.Ceph分布式存储 (1)Ceph概念:Ceph是一种高性能、可扩展的分布式存储系统&#xff0c;它提供了对象存储、块存储和文件系统存储三种存储接口,Ceph的设计目标是提供无单点故障的、高性能的、可扩展的存储解决方案&#xff0c;同时能够降低存储成本。(2)常用分布式存储方案Lust…

docker及docker exec命令学习笔记

docker exec 是一个常用的 Docker 命令&#xff0c;允许你在已经运行的容器中执行命令或启动新的进程。以下是详细介绍和常见用法&#xff1a; 基本语法 docker exec [OPTIONS] CONTAINER COMMAND [ARG...]参数详解 1. CONTAINER指定目标容器的名字或容器 ID。可以通过以下命…

<工具 Claude Desktop> 配置 MCP server 连接本地 SQLite, 本机文件夹(目录) 网络驱动器 Windows 11 系统

也是在学习中... 起因&#xff1a; 抖音博客 艾克AI分享 他的视频 #143《Claude开源MCP彻底打破AI的信息孤岛》 提到: Claude开源的MCP太强了&#xff0c;视频后面是快速演示&#xff0c;反正看了好几遍也没弄明白。菜单都不一样&#xff0c;感觉用的不是同一家 Claude. 探…

(78)MPSK基带调制通信系统瑞利平坦衰落信道传输性能的MATLAB仿真

文章目录 前言一、MATLAB仿真1.仿真代码2.仿真结果 二、子函数与完整代码总结 前言 本文给出瑞利平坦衰落信道上的M-PSK通信系统性能仿真的MATLAB源代码与仿真结果。其中&#xff0c;调制方式M-PSK包括BPSK、QPSK、8-PSK、16-PSK、32-PSK等方式。 一、MATLAB仿真 1.仿真代码 …

go语言 Pool实现资源池管理数据库连接资源或其他常用需要共享的资源

go Pool Pool用于展示如何使用有缓冲的通道实现资源池&#xff0c;来管理可以在任意数量的goroutine之间共享及独立使用的资源。这种模式在需要共享一组静态资源的情况&#xff08;如共享数据库连接或者内存缓冲区&#xff09;下非 常有用。如果goroutine需要从池里得到这些资…

LeetCode70. 爬楼梯(2024冬季每日一题 24)

假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2&#xf…

Android 系统之Init进程分析

1、Init进程流程 2、Init细节逻辑 2.1 Init触发shutdown init进程触发系统重启是一个很合理的逻辑&#xff0c;为什么合理&#xff1f; init进程是android世界的一切基石&#xff0c;如果android世界的某些服务或者进程出现异常&#xff0c;那么会导致整个系统无法正常使用…