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

基于css实现动画效果

news 2026/5/18 13:15:51

 介绍

        本文将会基于css，实现各种动画效果，接下来会从简单几个例子入手。

案例

三颗球

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>React App</title><style>.circle{width: 100px;height: 100px;border-radius: 50%; // 圆形background-color: red;position: absolute; // 绝对定位transform-origin: right center; // 中心轴 }@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg); // 旋转}}.circle:nth-child(1){animation: rotate 3s linear infinite;}.circle:nth-child(2){animation: rotate 3s linear 1s infinite;}.circle:nth-child(3){animation: rotate 3s linear 2s infinite;}.parent{position: relative;}</style></head><body><div class="parent"><div class="circle"></div><div class="circle"></div><div class="circle"></div></div></body>
</html>

效果

旋转小球

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>React App</title><style>.box{position: relative;background: #11445e;border: 10px solid #00d9ff;border-radius: 50%;width: 100px;height: 100px;animation: round 3s linear infinite ;}.box:before{position: absolute;top: 0;left: 0;content:'';width: 20px;height: 20px;background: rgb(255,132,0);border-radius: 50%;}@keyframes round {0%{rotate: 0deg}100%{rotate: 360deg}}</style></head><body><div class="box" style="margin-left: 100px; margin-top: 100px"></div></body>
</html>

效果展示

相关文章：

基于css实现动画效果

介绍 本文将会基于css&#xff0c;实现各种动画效果&#xff0c;接下来会从简单几个例子入手。 案例 三颗球 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><title>React App</title><style>…...

编程日记 2024/1/11 22:58:52

18.将文件上传至云服务器 + 优化网站的性能

目录 1.将文件上传至云服务器 1.1 处理上传头像逻辑 1.1.1 客户端上传 1.1.2 服务器直传 2.优化网站的性能 2.1 本地缓存优化查询方法 2.2 压力测试 1.将文件上传至云服务器 客户端上传&#xff1a;客户端将数据提交给云服务器&#xff0c;并等待其响应&#xff1b;用户…...

编程日记 2024/1/11 22:57:51

Linux: module: kheaders；CONFIG_IKHEADERS

文章目录 参考错误开一个玩笑。configcommit参考 https://github.com/iovisor/bcc/pull/2312 https://github.com/iovisor/bcc/pull/3588 https://bugs.gentoo.org/809347 https://lore.kernel.org/lkml/20190408212855.233198-1-joel@joelfernandes.org/ 错误 <built-in…...

编程日记 2024/1/11 22:54:48

Page 251~254 Win32 GUI项目

win32_gui 源代码&#xff1a; #if defined(UNICODE) && !defined(_UNICODE)#define _UNICODE #elif defined(_UNICODE) && !defined(UNICODE)#define UNICODE #endif#include <tchar.h> #include <windows.h>/* Declare Windows procedure */…...

编程日记 2024/1/11 22:53:47

Kafka（七）可靠性

目录 1 可靠的数据传递1.1 Kafka的可靠性保证1.2 复制1.3 Broker配置1.3.1 复制系数1.3.2 broker的位置分布1.3.3 不彻底的首领选举1.3.4 最少同步副本1.3.5 保持副本同步1.3.6 持久化到磁盘flush.messages9223372036854775807flush.ms9223372036854775807 1.2 在可靠的系统中使…...

编程日记 2024/1/11 22:49:43

Spring Data JPA入门到放弃

参考文档&#xff1a;SpringData JPA&#xff1a;一文带你搞懂 - 知乎 (zhihu.com) 一、 前言 1.1 概述 Java持久化技术是Java开发中的重要组成部分&#xff0c;它主要用于将对象数据持久化到数据库中&#xff0c;以及从数据库中查询和恢复对象数据。在Java持久化技术领域&a…...

编程日记 2024/1/11 22:48:40

MES系统数据采集的几种方式

生产制造执行MES系统具有能够帮助企业实现生产数据收集与分析、生产计划管理、生产过程监控等的功能板块&#xff0c;在这里小编就不一一介绍了&#xff0c;主要讲讲它的数据采集功能板块&#xff0c;可以说&#xff0c;数据采集是该系统进行数据统计与生产管理等后续工作的基础…...

编程日记 2024/1/11 22:47:39

铭文 LaunchPad 平台 Solmash 推出早鸟激励计划

为感谢用户对Solmash的支持&#xff0c;Solmash 特别推出“Solmash早鸟激励计划”&#xff0c;以回馈社区的早期参与者&#xff0c;这是专为已经参与Staking Pool或Honest Pool的用户推出的激励。 Solmash NFT激励 被列入早鸟计划的用户&#xff0c;可通过点击&#xff1a;sol…...

编程日记 2024/1/11 22:46:37

【前端规范】

1 前言 HTML 作为描述网页结构的超文本标记语言&#xff0c;一直有着广泛的应用。本文档的目标是使 HTML 代码风格保持一致&#xff0c;容易被理解和被维护。 2 代码风格 2.1 缩进与换行 [强制] 使用 4 个空格做为一个缩进层级&#xff0c;不允许使用 2 个空格 或 tab 字符…...

编程日记 2024/1/11 22:45:36

12、JVM高频面试题

1、JVM的主要组成部分有哪些 JVM主要分为下面几部分 类加载器&#xff1a;负责将字节码文件加载到内存中 运行时数据区&#xff1a;用于保存java程序运行过程中需要用到的数据和相关信息 执行引擎&#xff1a;字节码文件并不能直接交给底层操作系统去执行&#xff0c;因此需要…...

编程日记 2024/1/11 22:44:35

【Docker】Docker安装入门教程及基本使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Docker实战》。&#x1f3af;&#x1f3af; &…...

编程日记 2024/1/11 22:43:34

语义解析：如何基于SQL去实现自然语言与机器智能连接的桥梁

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 语义解析 定义 作用 语义解析的应用场景 场景一&#xff1a; 场景二&#xff1a; 总结语…...

编程日记 2024/1/11 22:41:31

Java项目：117SpringBoot动漫论坛网站

博主主页&#xff1a;Java旅途 简介&#xff1a;分享计算机知识、学习路线、系统源码及教程 文末获取源码 117SpringBoot动漫论坛网站 一、项目介绍 动漫论坛网站是由SpringBootMybatis开发的&#xff0c;旅游网站分为前台和后台&#xff0c;前台为用户浏览&#xff0c;后台进…...

编程日记 2024/1/11 22:39:29

Jenkins基础篇--添加节点

节点介绍 Jenkins 拥有分布式构建(在 Jenkins 的配置中叫做节点)&#xff0c;分布式构建能够让同一套代码在不同的环境(如&#xff1a;Windows 和 Linux 系统)中编译、测试等。 Jenkins 运行的主机在逻辑上是 master 节点&#xff0c;下图是主节点和从节点的关系。 添加节点 …...

编程日记 2024/1/11 22:38:28

【C++】手撕 list类（包含迭代器）

目录 1&#xff0c;list的介绍及使用 2&#xff0c;list_node 3&#xff0c;list_node() 3&#xff0c;list 4&#xff0c;list() 5&#xff0c;push_back(const T& x) 6&#xff0c;print() 7&#xff0c;_list_iterator 8&#xff0c;operator*() 9&#xff0c…...

编程日记 2024/1/11 22:37:27

@Autowired 和 @Resource 的区别是什么？

Java面试题目录 Autowired 和 Resource 的区别是什么&#xff1f; Autowired 是 Spring 提供的注解。默认的注入方式为byType&#xff08;根据类型进行匹配&#xff09;。 Resource 是 JDK 提供的注解。默认注入方式为 byName&#xff08;根据名称进行匹配&#xff09;。 当一…...

编程日记 2024/1/11 22:35:25

栈和排序.

给你一个1->n的排列和一个栈&#xff0c;入栈顺序给定 你要在不打乱入栈顺序的情况下&#xff0c;对数组进行从大到小排序 当无法完全排序时&#xff0c;请输出字典序最大的出栈序列 输入 第一行一个数n 第二行n个数&#xff0c;表示入栈的顺序&#xff0c;用空格隔开&…...

编程日记 2024/1/11 22:34:24

springboot 多数据源怎么配置在控制台的sql打印日志

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…...

编程日记 2024/1/11 22:33:24

【WinForms 窗体】常见的“陷阱”

当涉及到 WinForms 窗体编程时&#xff0c;我们可能会遇到一些常见的问题。在本篇博客中&#xff0c;我将为你提供一些常见问题的解决方案。 跨线程访问控件 在 WinForms 中&#xff0c;当在非UI线程上执行操作并尝试访问 UI 控件时&#xff0c;会引发跨线程访问异常。为了解决…...

编程日记 2024/1/11 22:32:23

Android readelf 工具查找函数符号

ELF&#xff08;Executable and Linkable Format&#xff09;是一种执行文件和可链接文件的格式。它是一种通用的二进制文件格式&#xff0c;用于在各种操作系统中存储可执行程序、共享库和内核模块。 Android 开发当中的 so 库本质上就是一种特殊类型的 ELF 文件&#xff0c;…...

编程日记 2024/1/11 22:30:21

ESP32驱动LCD1602：从I2C协议到动态数据展示

1. ESP32与LCD1602的完美组合 如果你正在寻找一种简单可靠的方式在物联网项目中显示实时数据&#xff0c;ESP32搭配LCD1602液晶屏绝对是个不错的选择。我最近在一个智能温室项目中就用了这套方案&#xff0c;用来实时显示温度和湿度数据&#xff0c;效果非常稳定。LCD1602虽然看…...

编程新知 2026/5/18 12:38:52

HS2-HF Patch：为《Honey Select 2》注入新生命的魔法补丁

HS2-HF Patch&#xff1a;为《Honey Select 2》注入新生命的魔法补丁 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 你是不是曾经打开《Honey Select 2》时&am…...

编程新知 2026/5/17 10:16:11

从0到1：手把手教你搭建VSCode（附避坑指南，拒绝报错），全程复制粘贴即可

&#x1f525;个人主页&#xff1a;北极的代码&#xff08;欢迎来访&#xff09; &#x1f3ac;作者简介&#xff1a;java后端学习者 ❄️个人专栏&#xff1a;苍穹外卖日记&#xff0c;SSM框架深入&#xff0c;JavaWeb ✨命运的结局尽可永在&#xff0c;不屈的挑战却不可须臾或…...

编程新知 2026/5/17 8:08:55

【2026最新】鸿蒙NEXT ArkUI实战：培训班管理系统UI界面开发全攻略

鸿蒙UI开发总是踩坑&#xff1f;ArkUI组件用法记不住&#xff1f;本文用15分钟带你彻底搞懂ArkUI核心组件、布局系统、自定义组件和交互动画&#xff0c;附完整培训班管理系统实战代码和踩坑记录&#xff0c;让你的鸿蒙App界面从此丝滑流畅&#xff01;一、培训班管理界面设计1…...

编程新知 2026/5/17 6:38:33

柔性3D打印与生物仿生设计：从TPU材料到空气喷涂的完整实践

1. 项目概述&#xff1a;当柔性3D打印遇上生物仿生美学如果你和我一样&#xff0c;玩3D打印玩久了&#xff0c;总会对那些千篇一律的硬质塑料件感到一丝审美疲劳。我们总在追求更高的精度、更强的结构&#xff0c;却常常忽略了材料本身可以带来的、截然不同的体验。直到我开始接…...

编程新知 2026/5/18 6:03:00

【ElevenLabs匈牙利语音实战指南】：2024最新API调用、音色微调与本地化合规避坑全解析

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs匈牙利语音支持概览与本地化价值定位 ElevenLabs 自 2024 年 3 月起正式引入匈牙利语&#xff08;hu-HU&#xff09;语音合成支持&#xff0c;成为其首批覆盖的中东欧语言之一。该能力依托于…...

编程新知 2026/5/17 3:35:31

CircuitPython REPL与库管理：嵌入式开发的效率利器

1. CircuitPython REPL&#xff1a;你的嵌入式开发“瑞士军刀” 如果你玩过Arduino&#xff0c;肯定对“上传-编译-看结果”这个循环不陌生。每次改一行代码&#xff0c;都得重新编译、上传&#xff0c;然后盯着串口看输出&#xff0c;效率低得让人抓狂。CircuitPython带来的R…...

编程新知 2026/5/18 8:24:47

基于RP2040与Santroller固件，复活旧吉他控制器玩转现代音游

1. 项目概述&#xff1a;让尘封的“神器”重获新生如果你和我一样&#xff0c;是个从《吉他英雄》、《摇滚乐队》时代走过来的老玩家&#xff0c;家里大概率还躺着一两把当年斥“巨资”购入的专用吉他控制器。它们手感扎实&#xff0c;造型酷炫&#xff0c;但最大的悲哀莫过于&…...

编程新知 2026/5/17 0:38:54

尼泊尔语语音合成落地难？ElevenLabs官方未公开的3个语言模型限制（附2024年Q2实测延迟/错误率/重音支持对比表）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;尼泊尔语语音合成落地难&#xff1f;ElevenLabs官方未公开的3个语言模型限制&#xff08;附2024年Q2实测延迟/错误率/重音支持对比表&#xff09; 尼泊尔语&#xff08;नेपाली&#xff09;作为IS…...

编程新知 2026/5/17 0:17:57

Cursor Free VIP终极指南：如何一键突破AI编程助手使用限制

Cursor Free VIP终极指南&#xff1a;如何一键突破AI编程助手使用限制 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your…...

编程新知 2026/5/18 0:51:41