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

用@keyframes-animation来实现动画效果

news 来源：原创 2025/8/5 16:40:57

一、使用规则

@keyframes

用于定义动画的关键帧。

animation属性

用于将@keyframes动画用于元素上。

二、基本语法

@keyframes

@keyframes xuanZhuan { /*xuanZhuan是动画名字,实现旋转*/0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(360deg);}/*(0%,25%，50%,75%100%)定义了动画的各个阶段*/        }@keyframes Fadeimg{     /*实现动画变淡的过程*/from{   /*初始状态,类似于0%*/opacity: 1;}precent{    /*中间状态—50%*/opacity: 0.5;}to{     /*结束的状态-100%*/opacity: 0;}

animation

.box1 img{width: 100px;height: 100px;border-radius: 50%;position: relative;/*animation: 动画名称 持续时间 动画速度曲线 延迟时间 重复次数 动画方向 填充模式;*/animation: xuanZhuan 10s infinite linear;   /*旋转10s,以线性速度无限旋转*/}.box2{width: 200px;height: 200px;background-color: #bb2a2ae3;animation: Fadeimg 3s ease-in-out infinite; /* 3秒内淡入淡出，无限循环*/}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画</title><style>@keyframes xuanZhuan { /*xuanZhuan是动画名字,实现旋转*/0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(360deg);}/*(0%,50%,100%)定义了动画的各个阶段*/        }@keyframes Fadeimg{     /*实现动画变淡的过程*/from{   /*初始状态,类似于0%*/opacity: 1;}precent{    /*中间状态—50%*/opacity: 0.5;}to{     /*结束的状态-100%*/opacity: 0;}}.box{display: flex;flex-direction: row;}.box1{  width: 300px;height: 300px;}.box1 img{width: 100px;height: 100px;border-radius: 50%;position: relative;/*animation: 动画名称 持续时间 动画速度曲线 延迟时间 重复次数 动画方向 填充模式;*/animation: xuanZhuan 10s infinite linear;   /*旋转10s,以线性速度无限旋转*/}.box2{width: 200px;height: 200px;background-color: #bb2a2ae3;animation: Fadeimg 3s ease-in-out infinite; /* 3秒内淡入淡出，无限循环*/}</style>
</head>
<body><div class="box"><div class="box1"><img src="图片/头像.jpg"></div><div class="box2"></div></div>  
</body>
</html>

动画效果：

/*这个动画效果视频上传后，我这里并没有播放出来*/

媒体1

三、@keyframes 的常见用途

transform

函数名	用途
translate（x,y)	将元素在水平和垂直方向上移动。
translateX(x)	水平上移动
translateY(y)	垂直上移动
translate3d(x,y,z)	分别表示在x,y,z轴上的位移
rotate(90deg)	旋转指定角度（90度）
rotate3d(x,y,z,angle)	前三个参数表示旋转轴的向量 ,第四个参数表示旋转的角度。
scale(x,y)	将元素缩放
scaleX(x)	水平方向上缩放
scaleY(y)	垂直上缩放
skew(x,y)	将元素倾斜
skewX(x)	水平上倾斜
skewY(y)	垂直上倾斜

代码：

  @keyframes xuanZhuan { 0% {/* 动画的初始状态 *//*transform: translateX(10px); transform: scale(5, 5); 注意：上面有两个 transform 属性，只有最后一个会生效 */transform: translateX(10px) scale(5, 5); /* 在 X 轴上平移 10px，并放大 5 倍 */}50% {/* 动画进行到 50% 时的状态 */transform: translateY(10px) rotate3d(1, 1, 1, 360deg); /* 在 Y 轴上平移 10px，并旋转 360 度 */}100% {/* 动画的结束状态 */transform: translate3d(5px, 10px, 5px); /* 在 3D 空间中平移 (5px, 10px, 5px) */}  
}

效果：

媒体1

opacity:控制元素的透明度//这里就不演示了，上面有代码
background-color：改变背景颜色

……

四、animation属性

animation-name:指定动画的名称
animation-duration:指定动画的持续时间，单位为秒或毫秒
animation-timing-function:指定动画的速度曲线，控制动画的快慢变化。

1) linear:匀速

2）ease:慢快慢（默认值）

3) ease-in:慢开始。

4) ease-out:慢结束。

5) ease-in-out:慢开始和慢结束。

6) cubic-bezier(n,n,n,n):自定义速度

animation-direction:指定动画的播放方向。

1)normal:正向播放（默认值）

2)reverse:反向播放

3)alternate:正向和反向交替播放

4)alternate-reverse:反向和正向交替播放

animation-play-state:指定动画的播放状态。

1)running:动画运行

2)paused:动画暂停

animation-fill-mode:指定动画结束后的状态

1)none:恢复初态

2)forwards：保留最后一帧的状态

3)backwards:保留第一帧的状态
4)both:同时应用forwards和backwards

animation-iteration-count:指定动画的重复次数。(infinite:无限循环）
animation-delay:指定动画开始前的延迟时间，单位为秒或毫秒

代码:

.box1 img {width: 100px;height: 100px;border-radius: 50%;position: relative;/*animation: xuanZhuan 10s infinite linear; *//* 使用 animation 子属性 */animation-name: xuanZhuan;  /* 动画名称 */animation-duration: 10s;    /* 动画持续时间 */animation-timing-function: linear;  /* 动画速度曲线 */animation-iteration-count: infinite;  /* 动画重复次数 */
}

用@keyframes-animation来实现动画效果

一、使用规则 keyframes 用于定义动画的关键帧。 animation属性用于将keyframes动画用于元素上。二、基本语法 keyframes keyframes xuanZhuan { /*xuanZhuan是动画名字,实现旋转*/0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(…...

编程日记 2025/8/5 16:40:57

kernel中外部传递参数使用方法

在 Linux 内核模块开发中，module_param(rpc_tdebug, uint, 0600); 表示定义一个可通过外部传递参数进行配置的模块级变量，具体解析如下： ‌参数名称‌ rpc_tdebug 是模块参数的变量名，该变量需在代码中提前声明为静态全局变量&…...

编程日记 2025/8/1 4:45:32

AI赋能流域生态评估：从多源数据融合到服务价值预测的技术突破

流域生态系统服务评价是生态学与地理信息科学的交叉前沿，传统方法受限于数据碎片化与模型解释力不足。本文以‌随机森林-时空图卷积联合模型（RF-STGCN）‌为核心，结合2022年长江中游实际监测数据，详解AI技术在服务评价中…...

编程日记 2025/8/5 20:52:36

SZU软件工程大学生涯 2022~2026

用于个人面试前自我介绍，防止忘记或谈吐不流利。面试官您好，我是来自深圳大学计算机与软件学院的软件工程专业的王雅贤。在校期间，我修读了程序设计基础、面向对象程序设计、数据结构、算法分析与设计、操作系统等核心课程，系统…...

编程日记 2025/8/3 20:23:11

如何设计一个合理的库存系统

库存管理系统是电商、供应链管理、仓储管理等核心系统之一。一个合理的库存系统需要同时满足高并发、数据一致性、实时性、扩展性等要求，以确保在各种业务场景下都能稳定运行。本文将探讨如何设计一个合理的库存系统，包括库存模型设计、数据一致性策略…...

编程日记 2025/8/5 20:49:14

数据人的进阶之路：四年数仓实践与成长思考

前言在数据仓库开发的过程中，常常会遇到很多值得思考的问题，它们不仅关乎技术的深度，也涉及业务理解、个人的成长，甚至是数据行业未来的价值。回顾过去的经历，有很多问题反复出现，甚至成为绕不开的课题&am…...

编程日记 2025/8/5 20:52:37

数据库原理及应用mysql版陈业斌实验一

🏝️专栏：Mysql_猫咪-9527的博客-CSDN博客 🌅主页：猫咪-9527-CSDN博客 “欲穷千里目，更上一层楼。会当凌绝顶，一览众山小。” 目录实验一：数据库与数据表的定义和数据操作 1.实验数据如下 …...

编程日记 2025/7/31 1:32:01

Linux环境变量：深入解析与实用指南

目录一、环境变量概述二、环境变量的作用三、环境变量的类型 3.1系统环境变量 3.2用户环境变量四、环境变量的操作 4.1查看环境变量 4.2设置环境变量 4.3删除环境变量五、环境变量的配置文件六、环境变量的最佳实践七、总结环境变量是Linux系统中至关重要的…...

编程日记 2025/8/3 19:23:35

大数据 Spark 技术简介

Apache Spark 是一种快速、通用、可扩展的大数据处理引擎，最初由加州大学伯克利分校开发。它提供了一种高效的数据处理框架，可以处理大规模数据集，并在分布式计算集群上进行并行处理。 Apache Spark 的基本概念包括以下几个要点：…...

编程日记 2025/8/5 20:50:38

Go语言的基础类型

一基础数据类型一、布尔型（Bool） 定义：表示逻辑真 / 假，仅有两个值：true 和 false内存占用：1 字节使用场景：条件判断、逻辑运算二、数值型（Numeric） 1. 整数类型&…...

编程日记 2025/7/31 18:45:25

面试复习-基础网络+运维知识

一、TCP/IP模型及每层对应通信协议 1.1第一层-应用层作用：服务及应用程序 HTTP --- 超文本传输协议--- 获取网页信息---80（TCP 80） HTTPS --- HTTP SSL（安全传输协议）/TLS ---443（TCP 443） …...

编程日记 2025/7/31 23:24:38

大屏设计新纪元：定制视觉盛宴

当城市天际线的巨型LED幕墙与元宇宙中的虚拟场景无缝交织，当博物馆的数字藏品在8K曲面屏上焕发新生，一个属于大屏设计的全新纪元已悄然降临。这场视觉革命不仅重构了信息传播的维度，更将“定制化体验”推向了前所未有的高度——每一寸屏幕都成…...

编程日记 2025/8/5 20:50:36

JavaIO流的使用和修饰器模式（直击心灵版）

系列文章目录 JavaIO流的使用和修饰器模式文章目录系列文章目录前言一、字节流： 1.FileInputStream(读取文件)2.FileOutputStream(写入文件) 二、字符流： 1..基础字符流:2.处理流：3.对象处理流：4.转换流： 三、修饰器…...

编程日记 2025/8/4 5:06:20

10-STL、位运算、常用函数库

1-STL vector vector是变长数组 //定义vector vector<int>a;//第一维长233，第二维长度动态变化 vector<int>b[233];//自定义的结构体类型也可以保存在vector中 struct res{...}; vector<rec>c;//函数 a.size();//返回vector的实际长度&#xf…...

编程日记 2025/7/26 22:40:09

【Ratis】Ratis Streaming概览

看了Tsz-Wo Nicholas Sze博士的一个关于Ratis的share，在share里提到了raits做的一个性能优化：客户端流。比较感兴趣，特此记录一下。如果想看原始分享的，可以搜关键词：Apache Ratis - A High Performance Raft Library 关于Ratis Stream的pdf介绍，在这个PR的附件里： [Ra…...

编程日记 2025/8/4 2:19:59

Python Seaborn面试题及参考答案

目录如何用 stripplot () 绘制带随机偏移的分类散点图？如何控制 jitter 参数？ swarmplot () 如何避免散点重叠？适用场景与数据量限制是什么？使用 catplot () 绘制箱线图时，如何通过 kind 参数切换图表类型？如何通过 hue 参数在分类图中添加第三个维度（如性别）？ …...

编程日记 2025/7/31 4:24:30

linux下基本命令和扩展命令（安装和登录命令、文件处理命令、系统管理相关命令、网络操作命令、系统安全相关命令、其他命令）欢迎补充噢

基本命令 ls: 列出目录内容 ls：列出当前目录内容ls -l：以长格式列出（显示详细信息）ls -a：显示隐藏文件ls -lh：以易读格式显示文件大小 pwd: 显示当前工作目录 pwd：显示当前目录的绝对路径 cd:…...

编程日记 2025/7/29 18:51:22

K8S学习之基础四十：K8S配置altermanager发送告警到钉钉群

配置altermanager发送告警到钉钉群创建钉钉群，设置机器人助手(必须是管理员才能设置)，获取webhook webhook： https://oapi.dingtalk.com/robot/send?access_token25bed933a52d69f192347b5be4b2193bc0b257a6d9ae68d81619e3ae3d93f7c6…...

编程日记 2025/7/29 19:31:46

实用工具--OfficeAI 助手 v0.3.20(长期免费,2025-03-18 本地支持WPSWord联动）

软件简介 OfficeAI助手，作为Microsoft Office与WPS的得力智能插件，集文档自动生成、内容精准校对与润色、公式智能推荐等多功能于一体。它凭借强大的数据分析能力，深度融入Office/WPS办公生态，一键简化复杂流程，让办公…...

编程日记 2025/7/31 18:19:08

Android 关于compose的一些坑和理解

** 1.如何在 WindowManager.addView 中使用 Jetpack Compose** 一、引出问题 Android 开发中，很常见的一个场景，通过 WindowManager.addView() 添加一个 View 到屏幕上。Android 最新的视图框架 Jetpack Compose，如何应用进来。这个被添加的…...

编程日记 2025/7/31 23:40:36

ref setState 合成事件

ref & setState & 合成事件受控组件的概念：数据改变视图的叫受控组件；通过dom操作改变的叫非受控。语法：给refxxx赋一个值，然后通过this.refs.xxx就可以获取到相应dom元素，通过你这个名字存储的值就是这个do…...

编程日记 2025/7/26 1:32:07

调用feapder作为子程序时setting.py文件不起作用

feaper 官方文档地址： 简介及安装 - feapder官方文档|feapder-document 问题： 在最近的开发中需要调用feapder作为主程序调用的子程序时发现自动入库时无法入库，通过查看日志信息发现连接数据库时被拒绝连接了，但是我的setting.p…...

编程日记 2025/7/28 10:50:46

gralloc1_perform具体在干什么

gralloc1_perform 会在特定场景下通过 ioctl 调用，执行缓存 (cache) 管理和内存映射操作，确保 CPU 和 GPU 之间的数据一致性。 📌 为什么需要对 cache 进行操作？ 在 Android 系统中，CPU 和 GPU 通常共享 DDR 内存…...

编程日记 2025/8/2 13:41:36

【Pandas】pandas Series plot.barh

Pandas2.2 Series Plotting 方法描述Series.plot([kind, ax, figsize, …])用于绘制 Series 对象的数据可视化图表Series.plot.area([x, y, stacked])用于绘制堆叠面积图（Stacked Area Plot）Series.plot.bar([x, y])用于绘制垂直条形图（Ver…...

编程日记 2025/8/5 10:21:08

机器学习之浅层神经网络

文章目录一、浅层神经网络概述（一）定义（二）常见类型二、浅层神经网络的前向传播三、浅层神经网络的反向传播四、编写浅层神经网络案例（Python NumPy 实现）代码解释五、浅层神经网络与深度学习的区别&am…...

编程日记 2025/8/3 9:31:02

透析Vue的nextTick原理

nextTick 是 Vue.js 中的一个核心机制，用于在下一次 DOM 更新周期后执行回调函数。它的核心原理是利用 JavaScript 的事件循环机制（Event Loop），结合微任务（Microtask）或宏任务（Macrotask&am…...

编程日记 2025/8/1 17:37:25

Beans模块之工厂模块注解模块@Qualifier

博主介绍：✌全网粉丝5W，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战，博主也曾写过优秀论文，查重率极低，在这方面有丰富的经验…...

编程日记 2025/7/28 7:26:45

产品更新 | 数字助决胜：华望M-Arch平台实现从体系模型到仿真推演

华望产品更新速递功能介绍 |M-Arch体系建模软件的核心功能 ◆体系架构建模 ◆逻辑仿真 ◆与多种工具集成 ◆多专业协同建模产品亮点 |M-Arch软件在体系作战中的作用 ◆全面构建任务和体系架构建模的能力 ◆模型化的装备体系分析方法 ◆提升作战体系架构设计与优化前…...

编程日记 2025/8/4 22:02:23

IP地址结构体与字符串转换函数详解

IP地址结构体与字符串转换函数详解在Linux C网络编程中，IP地址的二进制结构体（如struct in_addr）与字符串形式（如"192.168.1.1"）之间的转换经常涉及到，与IP地址格式相关的函数包括inet_aton、i…...

编程日记 2025/8/5 0:41:07

debug - 安装.msi时，为所有用户安装程序

文章目录 debug - 安装.msi时，为所有用户安装程序概述笔记试试在目标.msi后面直接加参数的测试备注备注END debug - 安装.msi时，为所有用户安装程序概述为了测试，装了一个test.msi. 安装时，只有安装路径的选择，没…...

编程日记 2025/7/31 5:38:49

基于springboot的社区团购系统（012）

摘要本课题是根据用户的需要以及网络的优势建立的一个社区团购系统，来满足用户团购的需求。本社区团购系统应用Java技术，MYSQL数据库存储数据，基于Spring Boot框架开发。在网站的整个开发过程中，首先对系统进行了需求分析&…...

编程日记 2025/8/3 1:15:16

应用权限组列表

文章目录使用须知位置相机麦克风通讯录日历运动数据身体传感器图片和视频音乐和音频跨应用关联设备发现和连接剪切板文件夹文件(deprecated) 使用须知在申请目标权限前，建议开发者先阅读应用权限管控概述-权限组和子权限，了解相关概念，再合…...

编程日记 2025/7/30 1:22:43

4.1、网络安全模型

目录网络安全体系概述网络安全模型-BLP模型网络安全模型-Biba模型网络安全模型 - 信息流模型信息保障模型能力成熟度模型其它安全模型网络安全原则网络安全体系概述网络安全体系是网络安全保证系统的最高层概念抽象，是一个体系，体系一般是一个概念&a…...

编程日记 2025/8/5 14:24:36

前端对接生成式AI接口（类ChatGPT）问题汇总

文章目录前端实现对话流问题总结流式数据传输问题后台Response Headers问题大量数据分段接收问题多个流时间戳（Time）相同导致被合并的问题中止对话问题复制问题部署上线问题（Nginx缓冲导致） 前端实现对话流问题总结流式数据传…...

编程日记 2025/8/2 19:30:18

布隆过滤器（Bloom Filter）详解

布隆过滤器详解 1. 什么是布隆过滤器？ 布隆过滤器（Bloom Filter）是一种高效的概率型数据结构，主要用于判断某个元素是否存在于一个集合中。它的特点是： 允许误判：可能会误判元素存在（假阳性&…...

编程日记 2025/8/3 14:18:25

QoS(Quality of Service)服务质量概念

一、什么是QoS？ QoS（Quality of Service）即服务质量，在网络业务中可以通过保证传输的带宽、降低传输时延、降低数据丢包率以及时延抖动等措施来提高服务质量。QoS是一套用于管理和提高网络性能的工具和技术，用于流量优…...

编程日记 2025/7/29 1:10:58

CSS实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果

CSS可以实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果。可以通过以下几种方法来实现： 1. 使用兄弟选择器（Adjacent Sibling Selector） 如果两个元素是兄弟关系（即它们有相同的父元素）&am…...

编程日记 2025/7/30 16:43:21

【C++11】左值引用、右值引用、移动语义和完美转发

🦄个人主页:修修修也 🎏所属专栏:C ⚙️操作环境:Visual Studio 2022 目录 📌左值引用和右值引用 🎏左值和左值引用 🎏右值和右值引用 📌左值引用和右值引用比较 🎏左值引用 🎏右值…...

编程日记 2025/8/3 12:11:00

Docker镜像迁移

目录 1.查看镜像当前配置 2.镜像迁移 1. 停止 Docker Desktop 2. 关闭 WSL 实例（若基于 WSL 2） 4. 导出原镜像数据 5.注销原实例 6. 导入数据到新路径 7. 设置 Docker Desktop 使用新路径（可选） 8. 启动 Docker Desktop …...

编程日记 2025/8/5 4:20:00

Compose 实践与探索十五 —— 自定义触摸

1、自定义触摸与一维滑动监测之前我们在讲 Modifier 时讲过如下与手势检测相关的 Modifier： Modifier.clickable { } Modifier.combinedClickable { } Modifier.pointerInput {detectTapGestures { } }这里对以上内容就不再赘述了，直接去讲解更复杂的…...

编程日记 2025/8/2 19:46:55

第P8周：YOLOv5-C3模块实现

🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 1. 模块组成 C3 模块由卷积层（Convolutional layers）、激活函数（Activation functions） 和残差连接&#…...

编程日记 2025/7/29 17:55:35

知识蒸馏：让大模型“瘦身“而不失智慧的魔术

引言：当AI模型需要"减肥" 在人工智能领域，一个有趣的悖论正在上演：大模型的参数规模每年以10倍速度增长，而移动设备的算力却始终受限。GPT-4的1750亿参数需要价值500万美元的GPU集群运行，但现实中的智能设备…...

编程日记 2025/8/1 18:36:31

`docker commit`和`docker tag`

1.docker commit docker commit是一个 Docker 命令，用于将一个正在运行的容器（Container）的状态提交为一个新的镜像（Image）。这类似于在版本控制系统中提交更改。作用 • 当你对一个容器进行了修改（例如安…...

编程日记 2025/8/1 1:40:59

构建下一代AI Agent：自动化开发与行业落地全解析

1. 下一代AI Agent：概念与核心能力核心能力描述技术支撑应用价值自主性独立规划与执行任务，无需持续人工干预决策树、强化学习、目标导向规划减少人工干预，提高任务执行效率决策能力评估多种方案并选择最优解决方案贝叶斯决策、多目标优化、…...

编程日记 2025/7/27 1:24:26

项目篇：模拟实现高并发内存池(2)

1.整体框架的设计首先我们要来大概的梳理一下我们的高并发内存池的整体框架设计在现代很多开发环境其实都是多核多线程，在申请内存的情况下，就必然会存在激烈的锁竞争问题。如果我们需要要实现内存池，必须要考虑以下几方面的问题。 1.性…...

编程日记 2025/7/27 18:10:43

PostgreSQL用SQL实现俄罗斯方块

📢📢📢📣📣📣 作者：IT邦德中国DBA联盟(ACDU)成员，10余年DBA工作经验 Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主，全网粉丝10万擅长主流Oracle、MySQL、PG、高斯…...

编程日记 2025/8/2 22:48:53

强大的AI网站推荐（第二集）—— V0.dev

网站：V0.dev 号称：前端开发神器，专为开发人员和设计师设计，能够使用 AI 生成 React 代码博主评价：生成的UI效果太强大了，适合需要快速创建UI原型的设计师和开发者推荐指数：🌟&…...

编程日记 2025/8/5 1:25:38

田间机器人幼苗视觉检测与护苗施肥装置研究（大纲）

田间机器人幼苗视觉检测与护苗施肥装置研究基于多光谱视觉与精准施肥的农业机器人系统设计第一章绪论 1.1 研究背景与意义农业智能化需求： 传统幼苗检测依赖人工，效率低且易遗漏弱苗/病苗施肥不精准导致资源浪费和环境污染技术挑战：…...

编程日记 2025/8/2 18:57:45

vLLM 同时部署多个模型及调用

目录一、单例加载多模型 （一） 原生多模型支持（vLLM ≥0.3.0） （二） 针对 vLLM 单实例部署多模型时只有最后一个模型生效的问题，结合实际测试和源码分析，以下是具体原因和解决方…...

编程日记 2025/8/5 18:05:14

LeetCode 2680.最大或值：位运算

【LetMeFly】2680.最大或值：位运算力扣题目链接：https://leetcode.cn/problems/maximum-or/ 给你一个下标从 0 开始长度为 n 的整数数组 nums 和一个整数 k 。每一次操作中，你可以选择一个数并将它乘 2 。你最多可以进行 k 次操作&#…...

编程日记 2025/7/31 19:21:08

一、使用规则

二、基本语法

三、@keyframes 的常见用途

四、animation属性

相关文章：