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

使用animation.css库快速实现CSS3旋转动画效果

article 2025/6/1 22:01:21

CSS3旋转动画效果实现（使用Animate.css）

下面我将展示如何使用Animate.css库快速实现各种CSS3旋转动画效果，同时提供一个直观的演示界面。

思路分析

  1. 引入Animate.css库
  2. 创建不同旋转动画的展示区域
  3. 添加控制面板自定义动画效果
  4. 实现实时预览功能

最终实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Animate.css旋转动画效果</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);color: #fff;min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;}header {text-align: center;padding: 40px 0;margin-bottom: 30px;}h1 {font-size: 3.5rem;text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);margin-bottom: 10px;background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #a18cd1);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.subtitle {font-size: 1.2rem;opacity: 0.9;max-width: 800px;margin: 0 auto;line-height: 1.6;}.grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;margin-bottom: 50px;}.card {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: 15px;padding: 25px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);transition: transform 0.3s ease;}.card:hover {transform: translateY(-5px);}.card h2 {font-size: 1.8rem;margin-bottom: 20px;color: #ffcc00;text-align: center;}.preview-area {height: 200px;display: flex;justify-content: center;align-items: center;margin: 20px 0;}.animated-element {width: 100px;height: 100px;background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #a18cd1);border-radius: 10px;display: flex;justify-content: center;align-items: center;font-size: 3rem;color: white;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}.controls {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: 15px;padding: 30px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);margin-bottom: 40px;}.controls h2 {font-size: 2rem;margin-bottom: 25px;color: #ffcc00;text-align: center;}.control-group {display: flex;flex-wrap: wrap;gap: 20px;margin-bottom: 20px;}.control-item {flex: 1;min-width: 250px;}label {display: block;margin-bottom: 8px;font-weight: 500;}select, input {width: 100%;padding: 12px;border-radius: 8px;border: none;background: rgba(255, 255, 255, 0.15);color: white;font-size: 1rem;}button {background: linear-gradient(45deg, #ff9a9e, #a18cd1);color: white;border: none;padding: 15px 30px;font-size: 1.1rem;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;display: block;margin: 30px auto 0;font-weight: bold;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}button:hover {transform: scale(1.05);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);}.code-container {background: rgba(0, 0, 0, 0.2);border-radius: 10px;padding: 20px;font-family: monospace;font-size: 1.1rem;overflow-x: auto;margin-top: 20px;}.code-highlight {color: #ffcc00;}footer {text-align: center;padding: 30px 0;font-size: 1rem;opacity: 0.8;}.info {margin-top: 20px;padding: 15px;background: rgba(255, 204, 0, 0.15);border-radius: 8px;border-left: 4px solid #ffcc00;}@media (max-width: 768px) {h1 {font-size: 2.5rem;}.grid {grid-template-columns: 1fr;}}</style>
</head>
<body><div class="container"><header><h1>Animate.css 旋转动画效果</h1><p class="subtitle">Animate.css 是一个现成的跨浏览器动画库，可用于您的 Web 项目。通过这个演示页面，您可以快速预览各种旋转动画效果并轻松集成到您的项目中。</p></header><div class="controls"><h2>自定义动画效果</h2><div class="control-group"><div class="control-item"><label for="animationType">选择动画效果：</label><select id="animationType"><option value="rotateIn">旋转进入 (rotateIn)</option><option value="rotateInDownLeft">左下旋转进入 (rotateInDownLeft)</option><option value="rotateInDownRight">右下旋转进入 (rotateInDownRight)</option><option value="rotateInUpLeft">左上旋转进入 (rotateInUpLeft)</option><option value="rotateInUpRight">右上旋转进入 (rotateInUpRight)</option><option value="rotateOut">旋转退出 (rotateOut)</option><option value="rotateOutDownLeft">左下旋转退出 (rotateOutDownLeft)</option><option value="rotateOutDownRight">右下旋转退出 (rotateOutDownRight)</option><option value="rotateOutUpLeft">左上旋转退出 (rotateOutUpLeft)</option><option value="rotateOutUpRight">右上旋转退出 (rotateOutUpRight)</option></select></div><div class="control-item"><label for="animationDuration">动画时长 (秒)：</label><input type="range" id="animationDuration" min="0.5" max="5" step="0.5" value="1"><span id="durationValue">1.0 秒</span></div><div class="control-item"><label for="animationDelay">动画延迟 (秒)：</label><input type="range" id="animationDelay" min="0" max="3" step="0.5" value="0"><span id="delayValue">0.0 秒</span></div></div><div class="preview-area"><div id="customElement" class="animated-element">✨</div></div><button id="applyAnimation">应用动画效果</button><div class="code-container"><p>HTML代码：</p><p>&lt;div class="animate__animated <span class="code-highlight" id="codeClass">animate__rotateIn</span>"&gt;元素内容&lt;/div&gt;</p><p>CSS代码：</p><p>.animate__animated {<br>&nbsp;&nbsp;--animate-duration: <span class="code-highlight" id="codeDuration">1s</span>;<br>&nbsp;&nbsp;--animate-delay: <span class="code-highlight" id="codeDelay">0s</span>;<br>}</p></div></div><div class="grid"><div class="card"><h2>旋转进入</h2><div class="preview-area"><div class="animated-element animate__animated animate__rotateIn">➰</div></div><div class="info"><p><strong>类名:</strong> animate__rotateIn</p><p>元素从透明状态旋转出现，适合元素进入场景时的动画效果。</p></div></div><div class="card"><h2>左下旋转进入</h2><div class="preview-area"><div class="animated-element animate__animated animate__rotateInDownLeft">↙️</div></div><div class="info"><p><strong>类名:</strong> animate__rotateInDownLeft</p><p>元素从屏幕左下方旋转进入，创造从角落进入的视觉效果。</p></div></div><div class="card"><h2>旋转退出</h2><div class="preview-area"><div class="animated-element animate__animated animate__rotateOut">➿</div></div><div class="info"><p><strong>类名:</strong> animate__rotateOut</p><p>元素旋转并逐渐消失，适合元素离开场景时的动画效果。</p></div></div><div class="card"><h2>右上旋转退出</h2><div class="preview-area"><div class="animated-element animate__animated animate__rotateOutUpRight">↗️</div></div><div class="info"><p><strong>类名:</strong> animate__rotateOutUpRight</p><p>元素向右上方旋转并消失，创造飞向屏幕右上角的效果。</p></div></div></div><footer><p>© 2023 CSS3旋转动画效果演示 | 使用Animate.css v4.1.1</p><p>提示：在实际项目中，您只需添加相应的类名即可应用这些动画效果</p></footer></div><script>document.addEventListener('DOMContentLoaded', function() {// 获取DOM元素const animationType = document.getElementById('animationType');const animationDuration = document.getElementById('animationDuration');const animationDelay = document.getElementById('animationDelay');const durationValue = document.getElementById('durationValue');const delayValue = document.getElementById('delayValue');const applyButton = document.getElementById('applyButton');const customElement = document.getElementById('customElement');const codeClass = document.getElementById('codeClass');const codeDuration = document.getElementById('codeDuration');const codeDelay = document.getElementById('codeDelay');// 更新时长显示animationDuration.addEventListener('input', function() {durationValue.textContent = this.value + ' 秒';codeDuration.textContent = this.value + 's';});// 更新延迟显示animationDelay.addEventListener('input', function() {delayValue.textContent = this.value + ' 秒';codeDelay.textContent = this.value + 's';});// 应用动画按钮document.getElementById('applyAnimation').addEventListener('click', function() {// 移除之前的动画类customElement.className = 'animated-element';// 添加新的动画类const selectedAnimation = 'animate__' + animationType.value;codeClass.textContent = selectedAnimation;// 添加动画类customElement.classList.add('animate__animated', selectedAnimation);// 设置自定义属性customElement.style.setProperty('--animate-duration', animationDuration.value + 's');customElement.style.setProperty('--animate-delay', animationDelay.value + 's');// 重新触发动画void customElement.offsetWidth;});// 为每个卡片添加点击预览功能document.querySelectorAll('.card .animated-element').forEach(element => {element.addEventListener('click', function() {// 获取动画类名const classes = this.className.split(' ');const animationClass = classes.find(cls => cls.startsWith('animate__') && cls !== 'animate__animated');if (animationClass) {// 在控制面板中设置对应的值animationType.value = animationClass.replace('animate__', '');codeClass.textContent = animationClass;// 应用动画到自定义元素customElement.className = 'animated-element';customElement.classList.add('animate__animated', animationClass);// 显示消息alert(`已应用动画: ${animationClass}`);}});});});</script>
</body>
</html>

功能说明

这个页面展示了如何使用Animate.css实现各种CSS3旋转动画效果：

  1. 预设动画展示区：

    • 展示了4种不同的旋转动画效果（rotateIn, rotateInDownLeft, rotateOut, rotateOutUpRight）
    • 每个卡片包含动画预览和说明信息

  2. 自定义控制面板：

    • 可选择10种不同的旋转动画效果
    • 可调整动画时长（0.5秒至5秒）
    • 可设置动画延迟时间（0秒至3秒）
    • 实时预览自定义动画效果

  3. 代码生成：

    • 显示应用动画所需的HTML和CSS代码
    • 代码会根据用户选择实时更新

  4. 交互功能：

    • 点击预设卡片可直接在自定义区域预览效果
    • 应用按钮可应用自定义设置

使用说明

  1. 在自定义控制面板中选择动画效果
  2. 调整动画时长和延迟时间
  3. 点击"应用动画效果"按钮查看结果
  4. 复制生成的代码到您的项目中

这个页面完全响应式，可在各种设备上正常显示，并使用了现代化的UI设计，包括毛玻璃效果、渐变背景和卡片式布局。

相关文章：

使用animation.css库快速实现CSS3旋转动画效果

CSS3旋转动画效果实现&#xff08;使用Animate.css&#xff09; 下面我将展示如何使用Animate.css库快速实现各种CSS3旋转动画效果&#xff0c;同时提供一个直观的演示界面。 思路分析 引入Animate.css库创建不同旋转动画的展示区域添加控制面板自定义动画效果实现实时预览功…...

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

基于NetWork的类FNAF游戏DEMO框架

脑洞大开 想做个fnaf1并加入自己的设计.. 开干!!!! #include <stdio.h> #include <iostream> #include <random> #include <ctime>bool leftdoor true, rightdoor true, camddoor true; float power 900,fanusepower 0;typedef struct movement…...

编程日记 2025/5/31 7:20:37

湖北理元理律师事务所：债务优化中的生活保障实践

在债务压力与生活质量失衡的普遍困境中&#xff0c;法律服务的价值不仅在于解决债务问题&#xff0c;更在于帮助债务人重建生活秩序。湖北理元理律师事务所通过其债务优化服务&#xff0c;探索出一条“法律生活”的双轨路径。 债务规划的核心矛盾&#xff1a;还款能力与生存需…...

编程日记 2025/6/1 9:19:05

golang连接sm3认证加密（app）

文章目录 环境文档用途详细信息 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;4.5 文档用途 golang连接安全版sm3认证加密数据库,驱动程序详见附件。 详细信息 1.下载Linux golang安装包 go1.17.3.linux-amd64.tar.gz 1.1. 解压安…...

编程日记 2025/5/31 7:18:35

【Zephyr 系列 2】用 Zephyr 玩转 Arduino UNO / MEGA，实现串口通信与 CLI 命令交互

🎯 本篇目标 在 Ubuntu 下将 Zephyr 运行在 Arduino UNO / MEGA 上 打通串口通信，实现通过串口发送命令与反馈 使用 Zephyr Shell 模块，实现 CLI 命令处理 🪧 为什么 Arduino + Zephyr？ 虽然 Arduino 开发板通常用于简单的 C/C++ 开发，但 Zephyr 的支持范围远超 STM32…...

编程日记 2025/6/1 11:19:33

AIS常见问题解答(AIS知识补充)

AIS常见问题解答 什么是 AIS&#xff1f; AIS 是“自动识别系统”的缩写。AIS 是一种基于甚高频 (VHF) 的导航和防撞工具&#xff0c;可以实现船舶之间的信息交换。这些信息&#xff08;AIS 数据&#xff09;还会被丹麦海事局运营的岸基 AIS 系统收集。因此&#xff0c;在提及 …...

编程日记 2025/6/1 16:19:20

基于Matlab实现指纹识别系统

【指纹识别系统基础概念】 指纹识别技术是一种生物特征识别技术&#xff0c;它利用人的指纹独一无二的特性进行个人身份的验证。指纹的细节特征&#xff0c;如脊、谷、分岔等&#xff0c;构成了指纹的唯一性&#xff0c;使得指纹识别在安全性、可靠性和便捷性上具有显著优势。…...

编程日记 2025/5/31 7:15:32

Windows10下搭建sftp服务器（附：详细搭建过程、CMD连接测试、连接失败问题分析解决等）

最终连接sftp效果 搭建sftp服务器 1、这里附上作者已找好的 freeSSHd安装包 ，使用它进行搭建sftp服务器。 2、打开freeSSHd安装包，进行安装 (1)、选择完全安装 (2)、安装完成后，对提示窗口选择关闭 (3)、安装完成后，提示是否安装私有密钥。我们选择"是" (4)、安…...

编程日记 2025/6/1 20:02:04

Vue3中Element-Plus中el-input及el-select 边框样式

如果不需要显示下边框&#xff0c;纯无边框直接将 【border-bottom: 1px solid #C0C4CC; 】注掉或去掉即可。 正常引用组件使用即可&#xff0c;无须自定义样式&#xff0c;最终效果CSS样式。 <style scoped> /* 输入框的样式 */ :deep(.el-input__wrapper) { box-sha…...

编程日记 2025/6/1 20:16:34

vue + ant-design + xlsx 实现Excel自定义模板导入功能

Vue Ant Design 扩展&#xff1a;实现Excel自定义模板导入功能 引言 在企业级应用场景中&#xff0c;除了数据导出&#xff0c;模板化导入是另一个核心需求。本文将深入讲解如何基于Vue3 Ant Design Vue xlsx技术栈&#xff0c;实现以下高级导入功能&#xff1a; 自定义模…...

编程日记 2025/5/31 7:12:27

SAP saml2 元数据 HTTP 错误

使⽤事务 SAML2 或 SAML2_IDP 在 ABAP 系统中配置 SAML 2.0 时&#xff0c; Web 页⾯返回 403 已禁⽌、 404 未找到 或 500 服务器内部错误。 在事务 SAML2 中下载元数据时&#xff0c; ⽹页返回 403 已禁⽌、 404 未找到或 500 服务器内部错误。 在事务 SAML2_IDP 中下载…...

编程日记 2025/6/1 18:08:52

知识课堂|sCMOS相机可编程快门模式解析

sCMOS相机凭借高灵敏度、高动态、低读出噪声特性&#xff0c;成为生命科学成像领域的核心设备。在光片荧光显微镜LSFM成像应用中&#xff0c;传统卷帘快门的时序限制可能引发运动伪影或光片照明不均匀问题。可编程快门模式通过精确控制传感器曝光时序&#xff0c;实现与激光扫描…...

编程日记 2025/5/31 7:10:20

数据结构之栈：原理与常用方法

1. 栈的定义 Stack是Vector的一个子类&#xff0c;它实现标准的后进先出堆栈。Stack只定义了创建空堆栈的默认构造方法。&#xff08;实际上是实现了List接口&#xff0c;因为Vector是List的子类&#xff09;。 Stack() // 创建一个空栈 2. 栈的基本操作 // 压栈操作 publi…...

编程日记 2025/6/1 15:52:52

在React框架中使用Braft Editor集成Table表格的详细教程

简介&#xff1a;Braft Editor是一款基于draft-js开发的React富文本编辑器&#xff0c;支持多媒体、自定义样式和扩展功能。其表格扩展模块允许用户插入、调整表格结构&#xff0c;适合需要数据展示的场景&#xff08;如CMS系统、报表工具&#xff09;。 1.安装依赖 yarn add…...

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

跳动的爱心

跳动的心形图案&#xff0c;通过字符打印和延时效果模拟跳动&#xff0c;心形在两种大小间交替跳动。 通过数学公式生成心形曲线 #include <stdio.h> #include <windows.h> // Windows 系统头文件&#xff08;用于延时和清屏&#xff09; void printHeart(int …...

编程日记 2025/5/31 7:07:16

gbase8s数据库+mybatis问题记录

在实际使用中一般都是mybatis数据库连接池组合使用&#xff0c;单独使用mybatis 连接数据库时&#xff0c;在循环使用PreparedStatement 时 会发生内存泄漏&#xff0c;PreparedStatement资源得不到释放 测试代码片段如下 drawMapper sqlsession.getMapper(DrawMapper.class…...

编程日记 2025/5/31 7:06:14

实现安卓端与苹果端互通的方案多种多样，以下是一些主要的方案

一、使用跨平台开发框架 1.React Native&#xff1a;通过React Native&#xff0c;开发者可以利用React.js的强大生态系统来构建原生移动应用。该框架允许使用相同的代码库在Android和iOS上开发应用&#xff0c;从而节省时间和成本。它支持热重载功能&#xff0c;使得开发者在…...

编程日记 2025/6/1 7:56:02

SpringBoot开发——Spring Boot异常处理全攻略：五大方案实战对比

文章目录 一、血泪教训：异常处理的代价二、五大异常处理方案详解2.1 全局异常处理（推荐方案）2.2 控制器级处理2.3 HTTP状态码注解2.4 ResponseEntity精细控制2.5 自定义异常体系（企业级方案）三、五大方案对比决策表四、四大避坑指南4.1 异常吞噬陷阱4.2 循环依赖问题4.3 异…...

编程日记 2025/6/1 9:17:52

React-props

文章目录 前言✅ 一、什么是 props&#xff1f;✅ 二、props 的特点✅ 三、props 的核心细节 & 常见问题1. **props 是新对象还是引用&#xff1f;**2. **函数作为 props&#xff1a;闭包陷阱**3. **默认值 & 解构默认值**4. **props.children 是什么&#xff1f;**5. …...

编程日记 2025/5/31 7:03:11

【C++篇】list模拟实现

实现接口&#xff1a; list的无参构造、n个val构造、拷贝构造 operator重载 实现迭代器 push_back() push_front() erase() insert() 头尾删 #pragma once #include<iostream> #include<assert.h> using namespace std;namespace liu {//定义list节点temp…...

编程日记 2025/5/31 7:02:10

Oracle exist

Oracle中的EXISTS是用于检查子查询结果是否为空的逻辑运算符&#xff0c;其核心特点和用法如下&#xff1a; ‌基础语法‌ SELECT columns FROM table1 WHERE EXISTS (SELECT 1 FROM table2 WHERE condition); 当子查询返回至少一行时返回TRUE&#xff0c;否则返回FALSE。 ‌执…...

编程日记 2025/5/31 7:01:09

带sdf 的post sim 小结

1.SDF文件主要内容 Delays&#xff08;module&#xff0c;device&#xff0c;interconnect&#xff0c;port&#xff09; Timing checks&#xff08;setup&#xff0c;hold&#xff0c;setuphold&#xff0c;recovery&#xff0c;removal&#xff0c;recrem&#xff09; Timing…...

编程日记 2025/6/1 15:50:13

【面试】喜茶Java面试题目

1、自我介绍、项目介绍&#xff1b; 2、equals 和 的区别&#xff1f;如何重写equals方法&#xff1f; 3、Java中的异常体系&#xff1f;运行时异常和非运行时异常的区别&#xff1f; 4、HashMap的底层数据结构&#xff1f;JDK1.7和1.8的区别&#xff1f; 5、线程池的核心…...

编程日记 2025/6/1 14:30:05

深入浅出：Spring IOCDI

什么是IOC IOC IOC(Inversion of Control)&#xff0c;是一种设计思想&#xff0c;在之前的SpringMVC里就在类上添加RestController和Controller注解就是使用了IOC&#xff0c;这两个注解就是在Spring中创建一个对象&#xff0c;并将注解下的类交给Spring管理&#xff0c;Spr…...

编程日记 2025/6/1 15:29:12

PlankAssembly 笔记 DeepWiki 正交视图三维重建

manycore-research/PlankAssembly | DeepWiki PlankAssembly项目原理 这个项目是一个基于深度学习的3D重建系统&#xff0c;其核心原理是从三个正交视图的工程图纸中重建出3D形状的结构化程序表示。 核心技术原理 1. 问题定义 PlankAssembly旨在从三个正交视图的工程图纸中…...

编程日记 2025/6/1 14:38:22

某验4无感探针-js逆向

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 一、总体概述二、请求分析1.分析请求流程三、逆向分析四、执行验证总结一、总体概述 本文主要实现用协议过某验4无感探针，相关的链接：aHR0cHM6Ly9ndDQuZ2VldGVzdC5jb20vZGVtb3Y0L2ludmlzaWJsZS1…...

编程日记 2025/6/1 15:55:39

js中common.js和ECMAScript.js区别

以下是关于 CommonJS 和 ECMAScript Modules&#xff08;ESM&#xff09;的详细对比分析&#xff0c;包含底层原理和示例说明&#xff1a; &#x1f9e9; 核心差异对比表 特性CommonJSES Modules来源Node.js 社区规范ECMAScript 语言标准加载方式动态加载&#xff08;运行时解…...

编程日记 2025/6/1 14:40:27

C语言操作Kafka

Kafka服务 Kafka的快速入门 文档很详细&#xff0c;基本上几步就可以搭建一个Kafka测试环境。 下载Kafka的二进制包&#xff0c;然后解压。 wget https://www.apache.org/dyn/closer.cgi?path/kafka/4.0.0/kafka_2.13-4.0.0.tgz tar -xzf kafka_2.13-4.0.0.tgz cd kafka_2.…...

编程日记 2025/6/1 12:41:03

STM32架构解析

在嵌入式开发领域，STM32作为广泛应用的Cortex-M系列微控制器，常常被问及一个基础而深刻的问题：STM32是哈佛结构，还是冯诺依曼结构？这个问题看似简单，却涉及到计算机架构发展的历史、理论与现实的融合。 一、计算体系结构基础：冯诺依曼 vs 哈佛 1.1 冯诺依曼结构的特性…...

编程日记 2025/5/31 6:52:52

在线政治采购系统架构构建指南

一、系统架构设计原则 合规性优先 系统需严格遵循《中华人民共和国政府采购法》及最新修订要求&#xff0c;例如采购流程需满足公开招标不少于 20 日的法定时限&#xff0c;合同需在中标通知书发出后 30 日内签订并备案。同时&#xff0c;需预留接口以适应未来法律修订带来的流…...

编程日记 2025/5/31 6:51:51