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

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

news 文章来源：https://blog.csdn.net/Cosmoshhhyyy/article/details/132352109 2025/5/15 1:34:01

文章目录

    • 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 反射机制前&#xff0c;大家应该先了解两个概念&#xff0c;编译期和运行期。 编译期是指把源码交给编译器编译成计算机可以执行的文件的过程。在 Java 中也就是把 Java 代码编成 class 文件的过程。编译期只是做了一些…...

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

legacy-peer-deps的作用

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

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

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

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

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

C/C++ 注意点补充

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

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

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

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

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

LaWGPT零基础部署win10+anaconda

准备代码&#xff0c;创建环境 # 下载代码 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 # 启动可视化脚本&#xff08;自动下载预训练模型约15GB…...

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

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

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&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（插入、修改和删除数据）

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

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

【Git】（五）切换分支

1、切换分支 git checkout newBranch 2、如果需要保留本地修改 ​git status git add . git commit --amend git checkout newBranch 3、强制切换分支 放弃本地修改&#xff0c;强制切换。 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&#xff08;VIP地址&#xff09; [rootnode6 ~]# ifconfig ens…...

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

mysql 03.查询（重点）

先准备测试数据&#xff0c;代码如下&#xff1a; -- 创建数据库 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文件

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

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

Leetcode32 最长有效括号

给你一个只包含 ( 和 ) 的字符串&#xff0c;找出最长有效&#xff08;格式正确且连续&#xff09;括号子串的长度。 代码如下&#xff1a; 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都是安卓端的依赖注入框架 通过注解生成的方式&#xff0c;来取代手动创建对象的方式&#xff0c;来管理对象和其作用域 Dagger是Square公司出品的&#xff0c;而Hilt是由Google公司在Dagger的基础上优化而来 配置项目级别gradle buildscri…...

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

phpstorm 推荐插件

...

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

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

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

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

C语言刷题训练DAY.6

1.进制AB 解题思路&#xff1a; 这里我们按照备注的提示&#xff0c;调整输入格式。 注意&#xff1a;%x是十六进制的数字 %o是八进制的数字 解题代码&#xff1a; #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

Java进阶篇--数据结构

目录 一.数组&#xff08;Array&#xff09;&#xff1a; 1.1 特点&#xff1a; 1.2 基本操作&#xff1a; 1.3 使用数组的好处包括&#xff1a; 1.4 数组也有一些限制&#xff1a; 二.集合框架&#xff08;Collections Framework&#xff09;&#xff1a; 2.1 列表…...

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

使用Facebook Pixel 埋点

在投放广告的时候&#xff0c;一般需要知道广告的产生的效益&#xff0c;所以就需要通过埋点去记录&#xff0c;这里使用到的是Facebook Pixel。 首先安装 npm install --save react-facebook-pixel然后进行封装了一下 /*** * param {事件类型默认为标准事件} eventType * pa…...

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

《Go 语言第一课》课程学习笔记（七）

代码块与作用域&#xff1a;如何保证变量不会被遮蔽&#xff1f; 什么是变量遮蔽呢&#xff1f;package mainimport ("fmt""github.com/google/uuid""github.com/sirupsen/logrus" )func main() {fmt.Println("hello, world")logrus.…...

编程日记 2023/8/18 8:34:02

Docker Nginx 运行前端项目

运行Nginx容器&#xff1a; docker run -itd --name nginx -p 80:80 nginx:latest--name是容器名称变量&#xff0c;nginx是创建容器的名称 copy 打包后的前端项目到容器的/usr/share/nginx目录下&#xff0c;拷贝后的目录一定要是&#xff1a;/usr/share/nginx/html否则无法运…...

编程日记 2023/8/18 8:31:59

企业权限管理（十）-用户详情

用户详情 UserController findById方法 Controller RequestMapping("/user") public class UserController {Autowiredprivate IUserService userService;//查询指定id的用户RequestMapping("/findById.do")public ModelAndView findById(String id) thro…...

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

Windows 11 家庭中文版找不到组策略文件gpedit.msc

最近因为调整日期问题需要用到组策略文件gpedit.msc,但是发现找不到文件 在按键盘 winR 打开运行界面输入 gpedit.msc 回车 Windows找不到文件’gpedit.msc’。请确定文件名是否正确后&#xff0c;再试-次。 检查电脑Windows系统版本 是 Windows 11 家庭中文版 果断早网上搜…...

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

vue3项目中structuredClone报错

报错&#xff1a;Failed to execute structuredClone on Window: #<Object> could not be cloned 代码&#xff1a; const formData ref({"content": "", // string"id": "", // string"title": "", // …...

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

Android漏洞之战——整体加壳原理和脱壳技巧详解

一、前言 为了帮助更加方便的进行漏洞挖掘工作&#xff0c;前面我们通过了几篇文章详解的给大家介绍了动态调试技术、过反调试技术、Hook技术、过反Hook技术、抓包技术等&#xff0c;掌握了这些可以很方便的开展App漏洞挖掘工作&#xff0c;而最后我们还需要掌握一定的脱壳技巧…...

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

网络

mcq Java 传输层&#xff1a;拆分和组装&#xff0c;完成端到端的消息传递&#xff0c;流量控制&#xff0c;差错控制等 网络层&#xff1a; 寻址、路由&#xff0c;复用&#xff0c;拥塞控制&#xff0c;完成源到宿的传递。 显然A选项是错误的&#xff0c;有流量控制的是传输层…...

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

一直往下get的map

一直往下get的map 文档&#xff1a;一直往下get的map.note 链接&#xff1a;http://note.youdao.com/noteshare?id7b6d315d86ce9e5f8d7cac9be8e924b8&sub95F9FFDA8EB447BBA506286E261F4C88 添加链接描述 package com.example.demo.entity;import org.bson.Document; impo…...

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