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

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

article 2025/9/5 1:27:34

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设计，包括毛玻璃效果、渐变背景和卡片式布局。

http://www.lryc.cn/news/2392725.html

相关文章：

  • 基于NetWork的类FNAF游戏DEMO框架
  • 湖北理元理律师事务所：债务优化中的生活保障实践
  • golang连接sm3认证加密（app）
  • 【Zephyr 系列 2】用 Zephyr 玩转 Arduino UNO / MEGA，实现串口通信与 CLI 命令交互
  • AIS常见问题解答(AIS知识补充)
  • 基于Matlab实现指纹识别系统
  • Windows10下搭建sftp服务器（附：详细搭建过程、CMD连接测试、连接失败问题分析解决等）
  • Vue3中Element-Plus中el-input及el-select 边框样式
  • vue + ant-design + xlsx 实现Excel自定义模板导入功能
  • SAP saml2 元数据 HTTP 错误
  • 知识课堂|sCMOS相机可编程快门模式解析
  • 数据结构之栈：原理与常用方法
  • 在React框架中使用Braft Editor集成Table表格的详细教程
  • 跳动的爱心
  • gbase8s数据库+mybatis问题记录
  • 实现安卓端与苹果端互通的方案多种多样，以下是一些主要的方案
  • SpringBoot开发——Spring Boot异常处理全攻略：五大方案实战对比
  • React-props
  • 【C++篇】list模拟实现
  • Oracle exist
  • 带sdf 的post sim 小结
  • 【面试】喜茶Java面试题目
  • 深入浅出：Spring IOCDI
  • PlankAssembly 笔记 DeepWiki 正交视图三维重建
  • 某验4无感探针-js逆向
  • js中common.js和ECMAScript.js区别
  • C语言操作Kafka
  • STM32架构解析
  • 在线政治采购系统架构构建指南
  • UHF RFID无源标签的芯片供电原理