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

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

news 2025/12/26 18:59:59

文章目录

- 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

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统题目开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...

编程新知 2025/12/23 13:21:02

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/12/20 8:36:22

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/12/24 22:45:32

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/12/25 18:03:56

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2025/12/11 5:12:21

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2025/8/17 7:11:57