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

CSS 小球随着椭圆移动

news 2026/4/3 8:36:50

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="background-img"><div class="area"><div class="ball ball1"></div><div class="ball ball2"></div><div class="ball ball3"></div><div class="ball ball4"></div><div class="ball ball5"></div><div class="ball ball6"></div><div class="ball ball7"></div><div class="ball ball8"></div></div>
</div>
</body>
</html>

css代码：

.background-img {height: 32vw;width: 60%;margin-top: 1vw;text-align: center;
}.area {width: 100%;height: 100%;position: relative;
}.area:hover>.ball {animation-play-state: paused; 
}.area>.ball {width: 7.0313vw;height: 7.0313vw;position: absolute;border-radius: 7.0313vw;background-image: linear-gradient(to top, #051F56, #1B8EF8);color: #E1EAFE;
}.area>.ball1 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate;
}.area>.ball2 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate;
}.area>.ball3 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate;
}.area>.ball4 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate;
}.area>.ball5 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate;
}.area>.ball6 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate;
}.area>.ball7 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -20s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate;
}.area>.ball8 {animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -22.5s infinite alternate,anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate;
}/* 动画 *//* 在X轴上的移动 */
@keyframes anmiteX {from {left: 56vw;}to {left: -1vw;}
}/* 在轴上Y的移动 */
@keyframes anmiteY {from {top: 7vw;}to {top: 28vw;}
}/* 对球进行放大和缩小在视觉上进行远近的模拟 */
@keyframes scale {0% {transform: scale(0.8, 0.8);opacity: 0.5;}50% {transform: scale(1.3, 1.3);opacity: 1;}100% {transform: scale(0.8, 0.8);opacity: 0.5;}
}

CSS 小球随着椭圆移动

html代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><…...

编程日记 2023/9/26 1:05:03

【李沐深度学习笔记】线性代数

课程地址和说明线性代数p1 本系列文章是我学习李沐老师深度学习系列课程的学习笔记，可能会对李沐老师上课没讲到的进行补充。线性代数标量标量（scalar），亦称“无向量”。有些物理量，只具有数值大小&#xff0c…...

编程日记 2023/9/26 1:03:02

vuejs - - - - - 递归组件的实现

递归组件的实现 1. 需求描述：2. 效果图：3. 代码3.1 封装组件代码3.2 父组件使用 1. 需求描述： 点击添加行，增加一级目录结构当类型为object or array时，点击右侧➕，增加子集点击右侧🚮&#x…...

编程日记 2023/9/26 1:00:58

精准对接促合作：飞讯受邀参加市工信局举办的企业供需对接会

2023年9月21日，由惠州市工业和信息化局主办的惠州市工业软件企业与制造业企业供需对接会成功举办，对接会旨在促进本地工业软件企业与制造业企业的紧密合作，推动数字化转型的深入发展。此次会议在市工业和信息化局16楼会议室举行，会…...

编程日记 2023/9/26 0:56:55

数学建模之遗传算法

文章目录前言遗传算法算法思想生物的表示初始种群的生成下一代种群的产生适应度函数轮盘赌交配变异混合产生新种群停止迭代的条件遗传算法在01背包中的应用01背包问题介绍01背包的其它解法01背包的遗传算法解法生物的表示初始种群的生成下一代种群的产生适应度函数轮盘赌交配…...

编程日记 2023/9/26 0:55:54

ISO9001认证常见的不符合项

今天，整理了一些关于ISO9001质量管理体系审核最常见的不合格项，以供大家参考。一、质量管理体系 1、质量手册（标准条款4.2.2） （1）各部门执行的文件与手册的规定不一致。 （2）质量…...

编程日记 2023/9/26 0:53:52

crypto：看我回旋踢

题目下载压缩包后解压可得到提示文本经过观察，synt{}这个提示与flag{}形式很像由题目名中的回旋可以推测为凯撒密码，由凯撒密码的定义可知，需要先推出移位数，s->f数13次，因此移位数为13，解码可得...

编程日记 2023/9/26 0:51:51

Springcloud实战之自研分布式id生成器

一，背景日常开发中，我们需要对系统中的各种数据使用 ID 唯一表示，比如用户 ID 对应且仅对应一个人，商品 ID 对应且仅对应一件商品，订单 ID 对应且仅对应一个订单。我们现实生活中也有各种 ID ，比如身…...

编程日记 2023/9/26 0:50:50

java 企业工程管理系统软件源码自主研发工程行业适用

工程项目管理软件（工程项目管理系统）对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营，全过程、全方位的对项目进行综合管理工程项目各模块及其功能点清单一、系统管理 1、数据字典&am…...

编程日记 2023/9/26 0:49:49

Spring Cloud Alibaba Nacos 2.2.3 (4) - 本地源码编译调试

下载nacos nacos在GitHub上有下载地址：https://github.com/alibaba/nacos/releases，可以选择任意版本下载。我下载的是2.2.3 版本导入idea mvn 安装包 1，切换到Terminal ,并且使用command prompt模式 2，执行 mvn -Prelease…...

编程日记 2023/9/26 0:48:48

WKB近似

WKB方法用于研究一种特定类型的微分方程的全局性质很有用这种特定的微分方程形如： 经过一些不是特别复杂的推导，我们可以得到他的WKB近似解。该近似解的选择取决于函数和参数的性质同时，我们默认函数的定义域为当恒大于零,时： 当…...

编程日记 2023/9/26 0:47:47

LeetCode算法二叉树—108. 将有序数组转换为二叉搜索树

目录 108. 将有序数组转换为二叉搜索树代码： 运行结果： 给你一个整数数组 nums ，其中元素已经按升序排列，请你将其转换为一棵高度平衡二叉搜索树。高度平衡二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不…...

编程日记 2023/9/26 0:45:46

如何设置 Git 短命令

设置 Git 短命令对喜欢敲命令而不用图形化工具的爱好者来说，设置短命令可以很好的提高效率。下面介绍两种设置短命令的方式。方式一 git config --global alias.ps push方式二打开全局配置文件 vim ~/.gitconfig写入内容 [alias] co checkoutps pushpl p…...

编程日记 2023/9/26 0:44:45

virtualbox无界面打开linux虚拟机的bat脚本，以及idea（代替Xshell）连接linux虚拟机的方法

virtualbox无界面打开linux虚拟机的bat脚本，以及idea连接linux虚拟机的方法命令行运行代码成功运行的效果图 idea连接linux虚拟机的方法【重要】查看虚拟机的IP地址idea中选择菜单（该功能可代替Xshell软件）配置设置连接成功进入idea中的命令…...

编程日记 2023/9/26 0:43:44

mockito 的 InjectMocks 和 Mock 有什么区别?

InjectMocks 和 Mock 是 Mockito 框架中用于测试的注解，用于创建和管理模拟对象（mocks）的不同方式。它们有以下区别： InjectMocks： InjectMocks 用于注入模拟对象（mocks）到被测试对象&#xf…...

编程日记 2023/9/26 0:42:43

网络工程师的爬虫技术之路：跨界电商与游戏领域的探索

随着数字化时代的到来，跨界电商和游戏行业成为了网络工程师们充满机遇的领域。这两个领域都依赖于高度复杂的技术来实现商业目标和提供卓越的用户体验。本文将深入探讨网络工程师在跨界电商和游戏领域的技术挑战以及应对这些挑战的方法。突破技术障碍的爬虫应用 …...

编程日记 2023/9/26 0:41:42

【TCP】确认应答与超时重传

确认应答与超时重传一. 确认应答机制二. 超时重传机制一. 确认应答机制确认应答: 保障可靠传输的核心机制。可靠传输: 不是指传输过去的数据不出错, 也不是指数据一定能传输过去，而是指发送方能够知道接收方是否接收到了数据。确认应答的关键就是接收方收到数…...

编程日记 2023/9/26 0:39:40

Kubernetes中Pod的扩缩容介绍

Kubernetes中Pod的扩缩容介绍在实际生产系统中，我们经常会遇到某个服务需要扩容的场景，也可能会遇到由于资源紧张或者工作负载降低而需要减少服务实例数量的场景。此时可以利用 Deployment/RC 的 Scale 机制来完成这些工作。 Kubernetes 对 Pod 的扩…...

编程日记 2023/9/26 0:38:38

vue点击pdf文件直接在浏览器中预览文件

好久没有更新文章了，说说为什么会有这篇文章呢，其实是应某个热线评论的要求出的，不过由于最近很长一段时间没打开csdn现在才看到，所以才会导致到现在才出。先来看看封装完这个预览方法的使用，主打一个方便使用&#x…...

编程日记 2023/9/26 0:36:36

通讯网关软件012——利用CommGate X2OPC实现MS SQL数据写入OPC Server

本文推荐利用CommGate X2OPC实现从MS SQL服务器获取数据并写入OPC Server。CommGate X2OPC是宁波科安网信开发的网关软件，软件可以登录到网信智汇(http://wangxinzhihui.com)下载。【案例】如下图所示，实现从MS SQL数据库获取数据并写入OPC Server。【…...

编程日记 2023/9/26 0:35:35

Wan2.2-I2V-A14B保姆级教程：从云服务器选购（CPU/内存/磁盘）到镜像运行全链路

Wan2.2-I2V-A14B保姆级教程：从云服务器选购到镜像运行全链路 1. 前言：为什么选择私有部署在当今视频内容需求爆炸式增长的时代，能够快速生成高质量视频内容的能力变得尤为重要。Wan2.2-I2V-A14B作为一款先进的文生视频模型，可以…...

编程新知 2026/4/3 7:56:41

告别编译报错！Termux安装Pandas最稳方案实测（附Matplotlib、Numpy、Scipy一键配置清单）

Termux科学计算环境搭建：零报错安装Pandas与数据三件套实战指南在移动端进行Python数据分析曾是天方夜谭，直到Termux的出现打破了这一限制。但许多用户在安装Pandas、Numpy、Scipy和Matplotlib这组"数据科学四件套"时，总会遇到各种…...

编程新知 2026/4/3 7:18:25

网站纠错页面对 SEO 有什么作用_网站图片和视频优化对 SEO 有什么技巧

网站纠错页面对 SEO 有什么作用在网站管理和搜索引擎优化（SEO）方面，纠错页面的作用常常被忽视。网站纠错页面实际上对 SEO 有着重要的影响。当用户访问一个网站时，如果遇到 404 错误（页面未找到）或其他错…...

编程新知 2026/4/3 6:51:55

支持RTX 30/40系显卡：PyTorch-2.x-Universal-Dev-v1.0镜像GPU验证指南

支持RTX 30/40系显卡：PyTorch-2.x-Universal-Dev-v1.0镜像GPU验证指南 1. 引言：为什么需要验证GPU环境在深度学习项目开发中，GPU加速是提升模型训练效率的关键因素。特别是对于RTX 30/40系列显卡用户，正确配置CUDA环境与PyTorc…...

编程新知 2026/4/3 6:45:51

Phi-4-mini-reasoning推理能力展示：多步分析题目的简洁结论生成效果

Phi-4-mini-reasoning推理能力展示：多步分析题目的简洁结论生成效果 1. 模型介绍 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型，特别擅长处理需要多步分析的题目。与通用聊天模型不同，它被设计用来解决数学题、逻辑题等需要严谨…...

编程新知 2026/4/3 5:26:22

pygcn终极指南：解决图神经网络开发者最常遇到的10个核心问题

pygcn终极指南：解决图神经网络开发者最常遇到的10个核心问题【免费下载链接】pygcn Graph Convolutional Networks in PyTorch 项目地址: https://gitcode.com/gh_mirrors/py/pygcn pygcn是一个基于PyTorch实现的图卷积网络（GCN）框架…...

编程新知 2026/4/3 4:09:18

终极Kando多语言指南：如何快速实现跨平台饼状菜单的国际化支持

终极Kando多语言指南：如何快速实现跨平台饼状菜单的国际化支持【免费下载链接】kando 🌸 Do things with utmost efficiency. 项目地址: https://gitcode.com/gh_mirrors/ka/kando Kando是一款高效的跨平台饼状菜单工具，通过直观的径…...

编程新知 2026/4/3 3:55:13

S-UI Windows版实战指南：从部署到精通的全方位解决方案

S-UI Windows版实战指南：从部署到精通的全方位解决方案为什么选择S-UI？解决Windows代理管理的三大痛点你是否也曾遇到这些问题：在Windows服务器上部署代理面板时，面对复杂的命令行操作望而却步？尝试多种工具后仍无法…...

编程新知 2026/4/3 3:41:01

基于机器学习算法的亚马逊用户评论情感分析研究：深入探讨随机森林与决策树模型的应用及其实验评估

《基于随机森林和决策树的亚马逊用户评论情感分析研究》深入探讨了利用机器学习技术对亚马逊用户评论数据进行情感分析的方法，旨在为电商企业提供更精准的用户反馈处理工具，以辅助产品优化和服务改进通过采用决策树模型和随机森林模型这两种不同的机器学…...

编程新知 2026/4/3 3:12:41

5G网络架构：核心网、接入网的组成与工作原理

5G网络架构：核心网、接入网的组成与工作原理📝 本章学习目标：本章探讨网络编程，帮助读者掌握网络应用开发技能。通过本章学习，你将全面掌握"5G网络架构：核心网、接入网的组成与工作原理"这一核心…...

编程新知 2026/4/3 2:31:52

相关文章：