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

CSS变形与动画（三）：animation帧动画详解（用法 + 四个例子）

news 2026/2/7 14:16:28

文章目录

- animation 帧动画
- - 使用
  - 定义
  - 例子1 字母
  - 例子2 水滴
  - 例子3 会动的边框
  - 例子4 旋转木马

animation 帧动画

定义好后作用于需要变化的标签上。

使用

animation-name 设置动画名称
animation-duration: 设置动画的持续时间
animation-timing-function 设置动画渐变速度
animation-delay 设置动画延迟时间
animation-iteration-count 设置动画执行次数无穷次（infinite）
animation-direction 设置动画的方向值有alternate（交替）
animation-play-state 设置动画播放的状态值 paused（暂停）
也可以向 transiton 那样多种属性写在一起，如：

animation: dh 4s linear 0s infinite alternate;

定义

@keyframes 动画的名称{  百分数 | to | from {  .....  }  
}

例子1 字母

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@keyframes dh {30% {width:200px;margin-left: 5px;background: blue;border-radius: 10%;border: 5px solid yellow;}50% {height: 300px;margin-left: 100px;background: yellow;border-radius: 50%;border: 5px solid white;}100% {height: 200px;margin-left: 500px;background: white;border-radius: 100%;border: 5px solid blue;}}.mb{height:600px;padding:50px ;display: flex;background: pink;align-items: center;}.b{border: 5px solid black;width:150px;background: red;height: 150px;animation:  4s linear 0s infinite alternate dh;}</style>
</head>
<body><div class="mb"><div class="b"></div></div>
</body>
</html>

例子2 水滴

水滴：除了不太像，还是挺像的。。。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}body{height:100vh;background: #81ecec;display: flex;justify-content: center;align-items: center;}body .sd{width:300px;height: 300px;background: rgb(255,255,255,0.1);border-radius: 36% 64% 73% 27% / 37% 57% 43% 63% ;box-shadow: 10px 10px 20px #518a8a, 5px 5px 20px #518a8a inset,-10px -10px 30px #c5f2f2 inset;padding: 20px;animation: dh 5s ease alternate infinite;}   body .sd::after{margin-top: 10px;margin-left: 70px;float: left;content:" ";width:40px;height:40px;background: rgb(255,255,255,0.1);border-radius: 36% 64% 73% 27% / 37% 57% 43% 63% ;box-shadow: -2px -2px 30px #cff6f6 inset;}body .sd::before{margin-top: 40px;margin-left: 70px;float: left;content:" ";width:20px;height:20px;background: rgba(145, 237, 237, 0.1);border-radius: 36% 64% 73% 27% / 37% 57% 43% 63% ;box-shadow: -2px -2px 30px #cff3f3 inset;}@keyframes dh {30%{border-radius: 65% 35% 56% 44% / 48% 41% 59% 52% ;width:350px;height: 350px;}50%{border-radius: 40% 60% 28% 72% / 70% 71% 29% 30% ;width:325px;height: 320px;}80%{border-radius: 40% 60% 70% 30% / 74% 48% 52% 26% ;width:320px;height: 270px;}100%{border-radius: 46% 54% 17% 83% / 54% 38% 62% 46% ;width:275px;height: 300px;}}</style>
</head>
<body><div class="sd"></div>
</body>
</html>

例子3 会动的边框

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}body{display: flex;height: 100vh;justify-content: center;align-items: center;background:#000;}.box{position: relative;overflow: hidden;}.box .txt{display: flex;font-size: 300px;background: linear-gradient(45deg, red, blue, green,pink);-webkit-background-clip: text;color:transparent;justify-content: center;align-items: center;padding:0 40px;}.box .xz{width:150px;height: 600px;position: absolute;top:50%;left: 50%;/* transform: translate(-50%, -50%); */background: linear-gradient(red, blue, green,pink);animation: dh 4s linear 0s infinite;transform-origin: 0 0 ;z-index: -2;}.box .txt::before{content:"";position:absolute;display: block;width:96%;height:94%;background: #000;z-index: -1;}@keyframes dh {0%{rotate: 0deg;}100%{rotate: 360deg;}}</style>
</head>
<body><div class="box"><div class="txt">Hello</div><div class="xz"></div></div>
</body>
</html>

例子4 旋转木马

在这里插入图片描述
可以自己往里面放点图片。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}body{display: flex;height:100vh;justify-content: center;align-items: center;background-color: black;perspective: 1000px;}.box{width:200px;height:200px;display: flex;position: relative;transform-style: preserve-3d;animation: action 30s linear infinite; }.box .item{width:200px;height:200px;position: absolute;box-shadow: 0 0 20px white;-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));}.box .item:nth-child(1){background-color: blue;transform: rotateY(0deg) translateZ(500px);}.box .item:nth-child(2){background-color: pink;transform: rotateY(60deg) translateZ(500px) ;}.box .item:nth-child(3){background-color: red;transform: rotateY(120deg) translateZ(500px) ;}.box .item:nth-child(4){background-color: white;transform:rotateY(180deg) translateZ(500px) ;}.box .item:nth-child(5){background-color: green;transform:rotateY(240deg) translateZ(500px) ;}.box .item:nth-child(6){background-color: yellow;transform:rotateY(300deg) translateZ(500px) ;}@keyframes action{0%{transform: rotateX(-10deg) rotateY(0deg);}100%{transform: rotateX(-10deg)rotateY(360deg);}}</style>
</head>
<body><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>

CSS变形与动画（三）：animation帧动画详解（用法 + 四个例子）

文章目录 animation 帧动画使用定义例子1 字母例子2 水滴例子3 会动的边框例子4 旋转木马 animation 帧动画定义好后作用于需要变化的标签上。使用 animation-name 设置动画名称 animation-duration: 设置动画的持续时间 animation-timing-function 设置动画渐变速度 anim…...

编程日记 2023/8/18 8:56:36

Ubuntu发布java版本

1、连接服务器 2、进入目录 cd /usr/safety/app/3、上传jar文件 4、杀掉原java进程 1. 查看当前java进程 2. ps -ef|grep java 3. ycmachine:/usr/safety/app$ ps -ef|grep java root 430007 1 6 01:11 pts/0 00:02:45 /usr/local/java/jdk1.8.0_341/bin/j…...

编程日记 2023/8/18 8:55:35

Java反射机制是什么？

Java反射机制是 Java 语言的一个重要特性。在学习 Java 反射机制前，大家应该先了解两个概念，编译期和运行期。编译期是指把源码交给编译器编译成计算机可以执行的文件的过程。在 Java 中也就是把 Java 代码编成 class 文件的过程。编译期只是做了一些…...

编程日记 2023/8/18 8:54:32

legacy-peer-deps的作用

加入ui组件库，以element-ui为例子安装命令： npm i element-ui -S 如果安装不上，是因为npm版本问题报错，那么就使用以下命令 npm i element-ui -S --legacy-peer-deps那么legacy-peer-deps的作用是？ 它是用于绕过pee…...

编程日记 2023/8/18 8:53:30

卷积操作后特征图尺寸，感受野，参数量的计算

文章目录 1、输出特征图的尺寸大小2、感受野的计算3、卷积核的参数量 1、输出特征图的尺寸大小如果包含空洞卷积，即扩张率dilation rate不为1时： 2、感受野的计算例如，图像经过两个3*3，步长为2的卷积后感受野为： co…...

编程日记 2023/8/18 8:52:29

C/C++ 注意点补充

C/C 注意点补充地址与指针函数缺省地址与指针 p的值是a的地址值，p的类型是int*，p的值是十六进制表示的地址值所以可以直接把地址值通过强制转换转换为地址p 如上图！！！ int a10; int *p&a; printf("%#p\n&…...

编程日记 2023/8/18 8:51:28

Python实时监控键盘的输入并打印出来

要实现Python实时监控键盘的输入并打印出来，可以使用pynput模块。首先，需要安装pynput模块： pip install pynput 然后，可以编写以下代码来实现实时监控键盘输入并打印出来的功能： from pynput import keyboard# 定…...

编程日记 2023/8/18 8:50:27

LaWGPT零基础部署win10+anaconda

准备代码，创建环境 # 下载代码 git clone https://github.com/pengxiao-song/LaWGPT cd LaWGPT # 创建环境 conda create -n lawgpt python3.10 -y conda activate lawgpt pip install -r requirements.txt # 启动可视化脚本（自动下载预训练模型约15GB…...

编程日记 2023/8/18 8:49:25

糖尿病视网膜病变，黄斑病变，年龄相关检测研究（Matlab代码）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/18 8:48:24

管理类联考——逻辑——真题篇——按知识分类——汇总篇——一、形式逻辑——选言——相容选言——或——第一节推结论

第五章　选言命题：相容选言-或；不相容选言-要么要么第一节　相容选言-或-推结论-A或B为真，则非A→B，非B→A(否一则肯一) 真题（2010-28）-相容选言-或-推结论-（1）A或B为真，A为假：得B为真(否一则肯一)； 28.域控制器储存了域内的账户、密码和属于这个城市的计算机三…...

编程日记 2023/8/18 8:47:23

MySQL数据库——图形化界面工具（DataGrip），SQL（2）-DML（插入、修改和删除数据）

目录图形化界面工具（DataGrip） 下载及安装启动及连接使用创建数据库创建表结构编写SQL DML 插入更新和删除 1.修改数据 2.删除数据总结图形化界面工具（DataGrip） 下载及安装 DataGrip下载链接：…...

编程日记 2023/8/18 8:46:21

【Git】（五）切换分支

1、切换分支 git checkout newBranch 2、如果需要保留本地修改 git status git add . git commit --amend git checkout newBranch 3、强制切换分支放弃本地修改，强制切换。 git checkout -f newBranch...

编程日记 2023/8/18 8:45:18

LVS集群和nginx负载均衡

目录 1、基于 CentOS 7 构建 LVS-DR 群集。 2、配置nginx负载均衡。 1、基于 CentOS 7 构建 LVS-DR 群集。 1.部署LVS负载调度器 1>安装配置工具 [rootnode6 ~]# yum install -y ipvsadm 2>配置LVS虚拟IP（VIP地址） [rootnode6 ~]# ifconfig ens…...

编程日记 2023/8/18 8:44:16

mysql 03.查询（重点）

先准备测试数据，代码如下： -- 创建数据库 DROP DATABASE IF EXISTS mydb; CREATE DATABASE mydb; USE mydb;-- 创建student表 CREATE TABLE student (sid CHAR(6),sname VARCHAR(50),age INT,gender VARCHAR(50) DEFAULT male );-- 向student表插入数据…...

编程日记 2023/8/18 8:43:15

arcpy读取csv、txt文件

目录前置：文件读写模式步骤一：设置工作空间和文件路径步骤二：创建要素类步骤三：读取CSV文件并导入数据步骤四：读取txt文件并导入数据总结当涉及到地理信息系统（GIS）数据处理时，有时…...

编程日记 2023/8/18 8:42:13

Leetcode32 最长有效括号

给你一个只包含 ( 和 ) 的字符串，找出最长有效（格式正确且连续）括号子串的长度。代码如下： class Solution {public int longestValidParentheses(String str) {Stack<Integer> s new Stack<>();int res 0;int st…...

编程日记 2023/8/18 8:41:12

【Android】Dagger和Hilt新手快速入门

什么是Dagger和Hilt Dagger和Hilt都是安卓端的依赖注入框架通过注解生成的方式，来取代手动创建对象的方式，来管理对象和其作用域 Dagger是Square公司出品的，而Hilt是由Google公司在Dagger的基础上优化而来配置项目级别gradle buildscri…...

编程日记 2023/8/18 8:40:10

phpstorm 推荐插件

...

编程日记 2023/8/18 8:39:09

在进行自动化测试，遇到验证码的问题,怎么办？

1.找开发去掉验证码或者使用万能验证码 2.使用OCR自动识别使用OCR自动化识别，一般识别率不是太高，处理一般简单验证码还是没问题这里使用的是Tesseract-OCR,下载地址：https://github.com/A9T9/Free-Ocr-Windows-Desktop/releases 怎么使…...

编程日记 2023/8/18 8:38:08

C语言刷题训练DAY.6

1.进制AB 解题思路： 这里我们按照备注的提示，调整输入格式。注意：%x是十六进制的数字 %o是八进制的数字解题代码： #include<stdio.h> int main() {int a 0;int b 0;scanf("0x%x 0%o", &a, &b);pri…...

编程日记 2023/8/18 8:37:07

XCTF-web-easyupload

试了试php，php7，pht，phtml等，都没有用尝试.user.ini 抓包修改将.user.ini修改为jpg图片在上传一个123.jpg 用蚁剑连接，得到flag...

编程新知 2026/1/25 10:02:40

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...

编程新知 2026/2/6 3:59:37

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色&#xf…...

编程新知 2026/2/1 22:23:58

工程地质软件市场：发展现状、趋势与策略建议

一、引言在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/27 16:43:24

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30