简体中文 繁體中文 English 日本語 Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français

开启辅助访问 切换到宽版

站内搜索

搜索

活动公告

通知：是的！我们正在计划一个大动作！
11-02 12:46
通知：Telegram 推送频道https://t.me/+2tB3a7aKXlw2YjA1 及时接收第一手论坛帖子信息～
10-23 09:32
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，将及时处理！
10-23 09:31
通知：加入QQ社群吧 https://qm.qq.com/q/QZibQd1hiq
10-23 09:28
通知：签到时间调整为每日4:00（东八区）
10-23 09:26
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

CSS3动画赋能SVG图形从基础应用到高级技巧全面解析打造流畅生动的网页动态视觉体验提升用户交互与参与度设计水平

威震华夏关云长

3万

主题

424

科技点

3万

积分

大区版主

木柜子打湿

积分
31917

三倍冰淇淋无人之境【一阶】财Doro小樱（小丑装）立华奏以外的星空【二阶】⑨的冰沙
发表于 2025-10-2 18:10:24 | 显示全部楼层 |阅读模式 [标记阅至此楼]

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
引言：CSS3动画与SVG的完美结合

在现代网页设计中，动态视觉效果已成为吸引用户注意力、提升交互体验的关键因素。CSS3动画和SVG(可缩放矢量图形)作为前端技术的两大支柱，它们的结合为设计师和开发者提供了创造流畅、生动且响应迅速的动态视觉体验的强大工具。CSS3动画以其简洁的语法和硬件加速的优势，为网页元素提供平滑的过渡效果；而SVG则以其矢量特性、可缩放性和DOM结构的可访问性，成为创建复杂图形的理想选择。当这两者结合时，不仅能创造出令人惊叹的视觉效果，还能保持良好的性能和用户体验。

本文将从基础概念出发，逐步深入到高级技巧，全面解析如何利用CSS3动画赋能SVG图形，帮助设计师和开发者打造更具吸引力和交互性的网页体验。

一、基础知识：CSS3动画与SVG概述

1.1 CSS3动画基础

CSS3动画主要通过两种方式实现：过渡(Transitions)和关键帧动画(Keyframe Animations)。

过渡(Transitions)：过渡是CSS3中最简单的动画形式，用于在元素状态改变时平滑地过渡属性值。
  2. .element {
  3.   transition: property duration timing-function delay;
  4. }
  6. /* 示例：按钮背景色过渡 */
  7. .button {
  8.   background-color: #3498db;
  9.   transition: background-color 0.3s ease;
  10. }
  12. .button:hover {
  13.   background-color: #2980b9;
  14. }
复制代码

关键帧动画(Keyframe Animations)：关键帧动画允许更复杂的动画序列，通过定义关键帧来控制动画在不同时间点的状态。
  2. @keyframes animationName {
  3.   0% { /* 初始状态 */ }
  4.   50% { /* 中间状态 */ }
  5.   100% { /* 结束状态 */ }
  6. }
  8. .element {
  9.   animation: animationName duration timing-function delay iteration-count direction fill-mode;
  10. }
  12. /* 示例：旋转动画 */
  13. @keyframes rotate {
  14.   from { transform: rotate(0deg); }
  15.   to { transform: rotate(360deg); }
  16. }
  18. .spinner {
  19.   animation: rotate 2s linear infinite;
  20. }
复制代码

1.2 SVG基础

SVG是一种基于XML的矢量图像格式，它使用标记语言来描述二维图形。SVG图形可以无限缩放而不失真，且文件体积通常较小。
  2. <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  3.   <!-- 矩形 -->
  4.   <rect x="50" y="50" width="100" height="100" fill="#3498db" />
  5.   
  6.   <!-- 圆形 -->
  7.   <circle cx="100" cy="100" r="40" fill="#e74c3c" />
  8.   
  9.   <!-- 路径 -->
  10.   <path d="M10,90 Q100,15 190,90 T190,190" stroke="#2ecc71" stroke-width="3" fill="none" />
  11. </svg>
复制代码

SVG的主要优势包括：

• 矢量特性：无损缩放
• 可编辑性：可通过CSS和JavaScript修改
• 可访问性：文本内容可被屏幕阅读器读取
• 性能优势：复杂图形通常比位图文件小
• 交互性：支持事件处理

二、CSS3动画与SVG的基础结合应用

2.1 为SVG元素应用CSS过渡

SVG元素可以像HTML元素一样应用CSS过渡效果。这使得我们可以在用户交互（如悬停）时平滑地改变SVG属性。
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>SVG与CSS过渡</title>
  8.   <style>
  9.     svg {
  10.       width: 300px;
  11.       height: 300px;
  12.     }
  13.    
  14.     .circle {
  15.       fill: #3498db;
  16.       transition: all 0.3s ease;
  17.       cursor: pointer;
  18.     }
  19.    
  20.     .circle:hover {
  21.       fill: #e74c3c;
  22.       r: 60;
  23.     }
  24.   </style>
  25. </head>
  26. <body>
  27.   <svg viewBox="0 0 200 200">
  28.     <circle class="circle" cx="100" cy="100" r="40" />
  29.   </svg>
  30. </body>
  31. </html>
复制代码

在这个例子中，当用户将鼠标悬停在圆形上时，圆形的颜色和半径会平滑地过渡到新的值。

2.2 SVG元素的关键帧动画

我们可以使用CSS关键帧动画为SVG元素创建更复杂的动画效果。
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>SVG关键帧动画</title>
  8.   <style>
  9.     svg {
  10.       width: 300px;
  11.       height: 300px;
  12.     }
  13.    
  14.     @keyframes pulse {
  15.       0% { transform: scale(1); opacity: 1; }
  16.       50% { transform: scale(1.1); opacity: 0.7; }
  17.       100% { transform: scale(1); opacity: 1; }
  18.     }
  19.    
  20.     .heart {
  21.       transform-origin: center;
  22.       animation: pulse 1.5s ease-in-out infinite;
  23.       fill: #e74c3c;
  24.     }
  25.   </style>
  26. </head>
  27. <body>
  28.   <svg viewBox="0 0 200 200">
  29.     <path class="heart" d="M100,34.6c-25.1-29.3-70.7-29.3-95.8,0c-25.1,29.3-25.1,76.8,0,106.1l95.8,95.8l95.8-95.8
  30.       C220.9,111.4,220.9,63.9,195.8,34.6C170.7,5.3,125.1,5.3,100,34.6z" />
  31.   </svg>
  32. </body>
  33. </html>
复制代码

这个例子展示了一个心形SVG图形，它使用关键帧动画实现了持续的脉动效果。

2.3 SVG路径动画

SVG路径动画是一种非常流行的技术，常用于创建绘制效果或进度指示器。
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>SVG路径动画</title>
  8.   <style>
  9.     svg {
  10.       width: 300px;
  11.       height: 300px;
  12.     }
  13.    
  14.     .path {
  15.       fill: none;
  16.       stroke: #3498db;
  17.       stroke-width: 3;
  18.       stroke-dasharray: 1000;
  19.       stroke-dashoffset: 1000;
  20.       animation: draw 3s ease-in-out forwards;
  21.     }
  22.    
  23.     @keyframes draw {
  24.       to {
  25.         stroke-dashoffset: 0;
  26.       }
  27.     }
  28.   </style>
  29. </head>
  30. <body>
  31.   <svg viewBox="0 0 200 200">
  32.     <path class="path" d="M20,100 Q100,20 180,100 T180,180" />
  33.   </svg>
  34. </body>
  35. </html>
复制代码

这个例子使用了stroke-dasharray和stroke-dashoffset属性，结合CSS动画，实现了路径的绘制效果。路径会像被画笔绘制一样逐渐显示出来。

三、中级技巧：复杂动画与交互

3.1 SVG组动画与变换

在SVG中，我们可以使用<g>元素将多个形状组合在一起，然后对整个组应用动画。这允许我们创建更复杂的动画效果。
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>SVG组动画</title>
  8.   <style>
  9.     svg {
  10.       width: 400px;
  11.       height: 400px;
  12.     }
  13.    
  14.     .car-group {
  15.       transform-origin: center;
  16.       animation: move 4s linear infinite;
  17.     }
  18.    
  19.     @keyframes move {
  20.       0% { transform: translateX(-100px); }
  21.       100% { transform: translateX(400px); }
  22.     }
  23.    
  24.     .wheel {
  25.       transform-origin: center;
  26.       animation: rotate 1s linear infinite;
  27.     }
  28.    
  29.     @keyframes rotate {
  30.       from { transform: rotate(0deg); }
  31.       to { transform: rotate(360deg); }
  32.     }
  33.   </style>
  34. </head>
  35. <body>
  36.   <svg viewBox="0 0 400 200">
  37.     <g class="car-group">
  38.       <!-- 车身 -->
  39.       <rect x="50" y="80" width="120" height="40" fill="#3498db" rx="5" />
  40.       <rect x="70" y="60" width="80" height="30" fill="#3498db" rx="5" />
  41.       
  42.       <!-- 车轮 -->
  43.       <circle class="wheel" cx="80" cy="130" r="15" fill="#2c3e50" />
  44.       <circle class="wheel" cx="140" cy="130" r="15" fill="#2c3e50" />
  45.     </g>
  46.   </svg>
  47. </body>
  48. </html>
复制代码

这个例子展示了一个简单的汽车SVG图形，其中整个汽车组水平移动，同时车轮旋转，创造出汽车行驶的效果。

3.2 SVG与CSS变量结合使用

CSS变量（自定义属性）可以与SVG结合使用，创建动态且可定制的动画效果。
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>SVG与CSS变量</title>
  8.   <style>
  9.     :root {
  10.       --primary-color: #3498db;
  11.       --secondary-color: #e74c3c;
  12.       --animation-duration: 3s;
  13.     }
  14.    
  15.     svg {
  16.       width: 300px;
  17.       height: 300px;
  18.     }
  19.    
  20.     .shape {
  21.       fill: var(--primary-color);
  22.       transition: fill var(--animation-duration) ease;
  23.     }
  24.    
  25.     .shape:hover {
  26.       fill: var(--secondary-color);
  27.     }
  28.    
  29.     @keyframes rotate {
  30.       from { transform: rotate(0deg); }
  31.       to { transform: rotate(360deg); }
  32.     }
  33.    
  34.     .rotating-shape {
  35.       animation: rotate var(--animation-duration) linear infinite;
  36.       transform-origin: center;
  37.     }
  38.   </style>
  39. </head>
  40. <body>
  41.   <svg viewBox="0 0 200 200">
  42.     <rect class="shape rotating-shape" x="50" y="50" width="100" height="100" />
  43.   </svg>
  44. </body>
  45. </html>
复制代码

通过使用CSS变量，我们可以轻松地调整动画的颜色、持续时间等属性，而不需要修改CSS代码的多个部分。

3.3 SVG滤镜动画

SVG滤镜可以与CSS动画结合，创建独特的视觉效果。
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>SVG滤镜动画</title>
  8.   <style>
  9.     svg {
  10.       width: 300px;
  11.       height: 300px;
  12.     }
  13.    
  14.     .glow {
  15.       filter: url(#glow-filter);
  16.       animation: pulse-glow 2s ease-in-out infinite;
  17.     }
  18.    
  19.     @keyframes pulse-glow {
  20.       0%, 100% { opacity: 0.8; }
  21.       50% { opacity: 1; }
  22.     }
  23.   </style>
  24. </head>
  25. <body>
  26.   <svg viewBox="0 0 200 200">
  27.     <defs>
  28.       <filter id="glow-filter" x="-50%" y="-50%" width="200%" height="200%">
  29.         <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
  30.         <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" result="glow" />
  31.         <feBlend in="SourceGraphic" in2="glow" mode="screen" />
  32.       </filter>
  33.     </defs>
  34.    
  35.     <circle class="glow" cx="100" cy="100" r="40" fill="#3498db" />
  36.   </svg>
  37. </body>
  38. </html>
复制代码

这个例子使用了SVG滤镜创建发光效果，并通过CSS动画使发光效果产生脉动。

四、高级技巧：创造性动画设计与性能优化

4.1 复杂SVG序列动画

通过组合多个动画和精心设计的时间轴，我们可以创建复杂的序列动画。
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>复杂SVG序列动画</title>
  8.   <style>
  9.     svg {
  10.       width: 400px;
  11.       height: 400px;
  12.     }
  13.    
  14.     .flower-petals {
  15.       transform-origin: center;
  16.       animation: bloom 2s ease-out forwards;
  17.     }
  18.    
  19.     @keyframes bloom {
  20.       0% { transform: scale(0) rotate(0deg); opacity: 0; }
  21.       70% { transform: scale(1.1) rotate(180deg); opacity: 1; }
  22.       100% { transform: scale(1) rotate(360deg); opacity: 1; }
  23.     }
  24.    
  25.     .flower-center {
  26.       transform-origin: center;
  27.       animation: grow 1.5s ease-out 0.5s forwards;
  28.       opacity: 0;
  29.     }
  30.    
  31.     @keyframes grow {
  32.       0% { transform: scale(0); opacity: 0; }
  33.       70% { transform: scale(1.2); opacity: 0.8; }
  34.       100% { transform: scale(1); opacity: 1; }
  35.     }
  36.    
  37.     .stem {
  38.       stroke-dasharray: 300;
  39.       stroke-dashoffset: 300;
  40.       animation: draw-stem 1.5s ease-out 1s forwards;
  41.     }
  42.    
  43.     @keyframes draw-stem {
  44.       to { stroke-dashoffset: 0; }
  45.     }
  46.    
  47.     .leaf {
  48.       transform-origin: bottom center;
  49.       animation: leaf-grow 1s ease-out 1.5s forwards;
  50.       opacity: 0;
  51.     }
  52.    
  53.     @keyframes leaf-grow {
  54.       0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  55.       70% { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
  56.       100% { transform: scale(1) rotate(0deg); opacity: 1; }
  57.     }
  58.   </style>
  59. </head>
  60. <body>
  61.   <svg viewBox="0 0 200 300">
  62.     <!-- 花瓣 -->
  63.     <g class="flower-petals">
  64.       <ellipse cx="100" cy="100" rx="15" ry="40" fill="#ff6b9d" transform="rotate(0 100 100)" />
  65.       <ellipse cx="100" cy="100" rx="15" ry="40" fill="#ff6b9d" transform="rotate(45 100 100)" />
  66.       <ellipse cx="100" cy="100" rx="15" ry="40" fill="#ff6b9d" transform="rotate(90 100 100)" />
  67.       <ellipse cx="100" cy="100" rx="15" ry="40" fill="#ff6b9d" transform="rotate(135 100 100)" />
  68.       <ellipse cx="100" cy="100" rx="15" ry="40" fill="#ff6b9d" transform="rotate(180 100 100)" />
  69.       <ellipse cx="100" cy="100" rx="15" ry="40" fill="#ff6b9d" transform="rotate(225 100 100)" />
  70.       <ellipse cx="100" cy="100" rx="15" ry="40" fill="#ff6b9d" transform="rotate(270 100 100)" />
  71.       <ellipse cx="100" cy="100" rx="15" ry="40" fill="#ff6b9d" transform="rotate(315 100 100)" />
  72.     </g>
  73.    
  74.     <!-- 花心 -->
  75.     <circle class="flower-center" cx="100" cy="100" r="20" fill="#ffd166" />
  76.    
  77.     <!-- 茎 -->
  78.     <path class="stem" d="M100,120 Q100,180 100,250" stroke="#06d6a0" stroke-width="5" fill="none" />
  79.    
  80.     <!-- 叶子 -->
  81.     <ellipse class="leaf" cx="70" cy="180" rx="20" ry="10" fill="#06d6a0" />
  82.   </svg>
  83. </body>
  84. </html>
复制代码

这个例子创建了一个花朵绽放的序列动画，花瓣先绽放，然后花心生长，接着茎被绘制出来，最后叶子生长。每个动画都有不同的延迟，形成一个连贯的序列。

4.2 SVG与JavaScript交互

虽然CSS动画很强大，但结合JavaScript可以实现更复杂的交互和动态控制。
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>SVG与JavaScript交互</title>
  8.   <style>
  9.     body {
  10.       display: flex;
  11.       flex-direction: column;
  12.       align-items: center;
  13.       font-family: Arial, sans-serif;
  14.     }
  15.    
  16.     svg {
  17.       width: 400px;
  18.       height: 400px;
  19.       border: 1px solid #ddd;
  20.       margin: 20px 0;
  21.     }
  22.    
  23.     .controls {
  24.       margin-top: 20px;
  25.     }
  26.    
  27.     button {
  28.       padding: 8px 16px;
  29.       margin: 0 5px;
  30.       background-color: #3498db;
  31.       color: white;
  32.       border: none;
  33.       border-radius: 4px;
  34.       cursor: pointer;
  35.     }
  36.    
  37.     button:hover {
  38.       background-color: #2980b9;
  39.     }
  40.    
  41.     .bar {
  42.       transition: all 0.3s ease;
  43.     }
  44.   </style>
  45. </head>
  46. <body>
  47.   <h1>Interactive SVG Bar Chart</h1>
  48.   
  49.   <svg viewBox="0 0 400 300">
  50.     <!-- 坐标轴 -->
  51.     <line x1="50" y1="250" x2="350" y2="250" stroke="#333" stroke-width="2" />
  52.     <line x1="50" y1="50" x2="50" y2="250" stroke="#333" stroke-width="2" />
  53.    
  54.     <!-- 数据条 -->
  55.     <rect class="bar" id="bar1" x="80" y="150" width="40" height="100" fill="#3498db" />
  56.     <rect class="bar" id="bar2" x="140" y="100" width="40" height="150" fill="#e74c3c" />
  57.     <rect class="bar" id="bar3" x="200" y="130" width="40" height="120" fill="#2ecc71" />
  58.     <rect class="bar" id="bar4" x="260" y="80" width="40" height="170" fill="#f39c12" />
  59.    
  60.     <!-- 标签 -->
  61.     <text x="100" y="270" text-anchor="middle" font-size="14">Q1</text>
  62.     <text x="160" y="270" text-anchor="middle" font-size="14">Q2</text>
  63.     <text x="220" y="270" text-anchor="middle" font-size="14">Q3</text>
  64.     <text x="280" y="270" text-anchor="middle" font-size="14">Q4</text>
  65.   </svg>
  66.   
  67.   <div class="controls">
  68.     <button id="randomize">Randomize Data</button>
  69.     <button id="animate">Animate Bars</button>
  70.   </div>
  71.   
  72.   <script>
  73.     // 获取所有条形元素
  74.     const bars = document.querySelectorAll('.bar');
  75.     const randomizeBtn = document.getElementById('randomize');
  76.     const animateBtn = document.getElementById('animate');
  77.    
  78.     // 随机化数据
  79.     randomizeBtn.addEventListener('click', () => {
  80.       bars.forEach(bar => {
  81.         const randomHeight = Math.floor(Math.random() * 150) + 50;
  82.         const newY = 250 - randomHeight;
  83.         
  84.         bar.setAttribute('height', randomHeight);
  85.         bar.setAttribute('y', newY);
  86.       });
  87.     });
  88.    
  89.     // 动画条形
  90.     animateBtn.addEventListener('click', () => {
  91.       bars.forEach((bar, index) => {
  92.         // 重置高度
  93.         bar.style.transform = 'scaleY(0)';
  94.         bar.style.transformOrigin = 'bottom';
  95.         
  96.         // 延迟动画
  97.         setTimeout(() => {
  98.           bar.style.transform = 'scaleY(1)';
  99.         }, index * 200);
  100.       });
  101.     });
  102.    
  103.     // 为每个条形添加悬停效果
  104.     bars.forEach(bar => {
  105.       bar.addEventListener('mouseenter', () => {
  106.         bar.style.opacity = '0.7';
  107.       });
  108.       
  109.       bar.addEventListener('mouseleave', () => {
  110.         bar.style.opacity = '1';
  111.       });
  112.     });
  113.   </script>
  114. </body>
  115. </html>
复制代码

这个例子展示了一个交互式SVG条形图，用户可以通过按钮随机化数据或触发条形动画，同时鼠标悬停时条形会有视觉反馈。

4.3 性能优化技巧

在使用CSS3动画和SVG时，性能优化是一个重要考虑因素。以下是一些优化技巧：

1. 使用transform和opacity属性：这些属性通常由GPU加速，性能更好。
  2. /* 好的做法 */
  3. .animated-element {
  4.   transform: translateX(100px);
  5.   opacity: 0.5;
  6. }
  8. /* 避免的做法 */
  9. .animated-element {
  10.   left: 100px;
  11.   visibility: hidden;
  12. }
复制代码

1. 限制同时动画的元素数量：过多的同时动画可能导致性能问题。
2. 使用will-change属性：提前告知浏览器元素将会变化，让浏览器做好准备。

限制同时动画的元素数量：过多的同时动画可能导致性能问题。

使用will-change属性：提前告知浏览器元素将会变化，让浏览器做好准备。
  2. .optimize-animation {
  3.   will-change: transform, opacity;
  4. }
复制代码

1. 简化SVG路径：复杂的路径会增加渲染负担，可以使用工具简化路径。
2. 避免在动画中使用box-shadow和filter：这些属性性能开销较大。
3. 使用requestAnimationFrame：对于JavaScript控制的动画，使用requestAnimationFrame而不是setTimeout或setInterval。

简化SVG路径：复杂的路径会增加渲染负担，可以使用工具简化路径。

避免在动画中使用box-shadow和filter：这些属性性能开销较大。

使用requestAnimationFrame：对于JavaScript控制的动画，使用requestAnimationFrame而不是setTimeout或setInterval。
  2. function animateElement() {
  3.   // 动画逻辑
  4.   requestAnimationFrame(animateElement);
  5. }
  7. requestAnimationFrame(animateElement);
复制代码

1. 对复杂SVG使用图层：将静态和动态元素分开到不同的SVG元素中。
  2. <!-- 静态背景 -->
  3. <svg id="background" viewBox="0 0 100 100">
  4.   <!-- 静态内容 -->
  5. </svg>
  7. <!-- 动态内容 -->
  8. <svg id="dynamic-content" viewBox="0 0 100 100">
  9.   <!-- 动态内容 -->
  10. </svg>
复制代码

五、实际案例分析

5.1 加载动画设计

加载动画是提升用户体验的重要元素，下面是一个使用SVG和CSS3动画创建的创意加载动画：
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>创意加载动画</title>
  8.   <style>
  9.     body {
  10.       display: flex;
  11.       justify-content: center;
  12.       align-items: center;
  13.       height: 100vh;
  14.       background-color: #f5f5f5;
  15.       margin: 0;
  16.     }
  17.    
  18.     .loader-container {
  19.       text-align: center;
  20.     }
  21.    
  22.     .loader {
  23.       width: 200px;
  24.       height: 200px;
  25.       margin: 0 auto;
  26.     }
  27.    
  28.     .loader-circle {
  29.       fill: none;
  30.       stroke-width: 8;
  31.       stroke-linecap: round;
  32.       transform-origin: center;
  33.       animation: rotate 2s linear infinite;
  34.     }
  35.    
  36.     .loader-circle-1 {
  37.       stroke: #3498db;
  38.       stroke-dasharray: 150;
  39.       stroke-dashoffset: 0;
  40.       animation: rotate 2s linear infinite, dash 1.5s ease-in-out infinite;
  41.     }
  42.    
  43.     .loader-circle-2 {
  44.       stroke: #e74c3c;
  45.       stroke-dasharray: 100;
  46.       stroke-dashoffset: 0;
  47.       animation: rotate 3s linear infinite reverse, dash 2s ease-in-out infinite;
  48.     }
  49.    
  50.     .loader-circle-3 {
  51.       stroke: #2ecc71;
  52.       stroke-dasharray: 50;
  53.       stroke-dashoffset: 0;
  54.       animation: rotate 4s linear infinite, dash 2.5s ease-in-out infinite;
  55.     }
  56.    
  57.     @keyframes rotate {
  58.       to { transform: rotate(360deg); }
  59.     }
  60.    
  61.     @keyframes dash {
  62.       0% { stroke-dashoffset: 0; }
  63.       50% { stroke-dashoffset: -100; }
  64.       100% { stroke-dashoffset: -200; }
  65.     }
  66.    
  67.     .loader-text {
  68.       margin-top: 20px;
  69.       font-family: Arial, sans-serif;
  70.       font-size: 18px;
  71.       color: #333;
  72.     }
  73.   </style>
  74. </head>
  75. <body>
  76.   <div class="loader-container">
  77.     <div class="loader">
  78.       <svg viewBox="0 0 100 100">
  79.         <circle class="loader-circle loader-circle-1" cx="50" cy="50" r="40" />
  80.         <circle class="loader-circle loader-circle-2" cx="50" cy="50" r="30" />
  81.         <circle class="loader-circle loader-circle-3" cx="50" cy="50" r="20" />
  82.       </svg>
  83.     </div>
  84.     <div class="loader-text">Loading...</div>
  85.   </div>
  86. </body>
  87. </html>
复制代码

这个加载动画使用了三个旋转的圆形，每个圆形有不同的颜色、大小、旋转速度和虚线动画，创造出动感十足的加载效果。

5.2 数据可视化动画

数据可视化是SVG和CSS3动画的另一个重要应用领域。下面是一个带有动画效果的折线图：
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>数据可视化动画</title>
  8.   <style>
  9.     body {
  10.       font-family: Arial, sans-serif;
  11.       display: flex;
  12.       flex-direction: column;
  13.       align-items: center;
  14.       padding: 20px;
  15.     }
  16.    
  17.     .chart-container {
  18.       width: 600px;
  19.       height: 400px;
  20.       border: 1px solid #ddd;
  21.       padding: 20px;
  22.       box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  23.     }
  24.    
  25.     .chart-title {
  26.       text-align: center;
  27.       margin-bottom: 20px;
  28.       color: #333;
  29.     }
  30.    
  31.     svg {
  32.       width: 100%;
  33.       height: 100%;
  34.     }
  35.    
  36.     .grid-line {
  37.       stroke: #e0e0e0;
  38.       stroke-width: 1;
  39.     }
  40.    
  41.     .axis {
  42.       stroke: #333;
  43.       stroke-width: 2;
  44.     }
  45.    
  46.     .axis-label {
  47.       font-size: 12px;
  48.       fill: #666;
  49.     }
  50.    
  51.     .data-line {
  52.       fill: none;
  53.       stroke: #3498db;
  54.       stroke-width: 3;
  55.       stroke-dasharray: 1000;
  56.       stroke-dashoffset: 1000;
  57.       animation: draw-line 2s ease-in-out forwards;
  58.     }
  59.    
  60.     @keyframes draw-line {
  61.       to { stroke-dashoffset: 0; }
  62.     }
  63.    
  64.     .data-point {
  65.       fill: #3498db;
  66.       opacity: 0;
  67.       animation: fade-in 0.5s ease-in-out forwards;
  68.     }
  69.    
  70.     .data-point:hover {
  71.       fill: #2980b9;
  72.       r: 6;
  73.     }
  74.    
  75.     .tooltip {
  76.       position: absolute;
  77.       padding: 8px;
  78.       background-color: rgba(0,0,0,0.7);
  79.       color: white;
  80.       border-radius: 4px;
  81.       font-size: 14px;
  82.       pointer-events: none;
  83.       opacity: 0;
  84.       transition: opacity 0.3s;
  85.     }
  86.    
  87.     @keyframes fade-in {
  88.       to { opacity: 1; }
  89.     }
  90.   </style>
  91. </head>
  92. <body>
  93.   <div class="chart-container">
  94.     <h2 class="chart-title">月度销售数据</h2>
  95.    
  96.     <svg viewBox="0 0 560 300">
  97.       <!-- 网格线 -->
  98.       <g class="grid">
  99.         <line class="grid-line" x1="50" y1="50" x2="50" y2="250" />
  100.         <line class="grid-line" x1="50" y1="250" x2="530" y2="250" />
  101.         
  102.         <line class="grid-line" x1="50" y1="50" x2="530" y2="50" />
  103.         <line class="grid-line" x1="50" y1="100" x2="530" y2="100" />
  104.         <line class="grid-line" x1="50" y1="150" x2="530" y2="150" />
  105.         <line class="grid-line" x1="50" y1="200" x2="530" y2="200" />
  106.         
  107.         <line class="grid-line" x1="130" y1="50" x2="130" y2="250" />
  108.         <line class="grid-line" x1="210" y1="50" x2="210" y2="250" />
  109.         <line class="grid-line" x1="290" y1="50" x2="290" y2="250" />
  110.         <line class="grid-line" x1="370" y1="50" x2="370" y2="250" />
  111.         <line class="grid-line" x1="450" y1="50" x2="450" y2="250" />
  112.         <line class="grid-line" x1="530" y1="50" x2="530" y2="250" />
  113.       </g>
  114.       
  115.       <!-- 坐标轴 -->
  116.       <line class="axis" x1="50" y1="50" x2="50" y2="250" />
  117.       <line class="axis" x1="50" y1="250" x2="530" y2="250" />
  118.       
  119.       <!-- Y轴标签 -->
  120.       <text class="axis-label" x="40" y="55" text-anchor="end">100</text>
  121.       <text class="axis-label" x="40" y="105" text-anchor="end">75</text>
  122.       <text class="axis-label" x="40" y="155" text-anchor="end">50</text>
  123.       <text class="axis-label" x="40" y="205" text-anchor="end">25</text>
  124.       <text class="axis-label" x="40" y="255" text-anchor="end">0</text>
  125.       
  126.       <!-- X轴标签 -->
  127.       <text class="axis-label" x="90" y="270" text-anchor="middle">1月</text>
  128.       <text class="axis-label" x="170" y="270" text-anchor="middle">2月</text>
  129.       <text class="axis-label" x="250" y="270" text-anchor="middle">3月</text>
  130.       <text class="axis-label" x="330" y="270" text-anchor="middle">4月</text>
  131.       <text class="axis-label" x="410" y="270" text-anchor="middle">5月</text>
  132.       <text class="axis-label" x="490" y="270" text-anchor="middle">6月</text>
  133.       
  134.       <!-- 数据线 -->
  135.       <path class="data-line" d="M90,190 L170,150 L250,120 L330,100 L410,140 L490,80" />
  136.       
  137.       <!-- 数据点 -->
  138.       <circle class="data-point" cx="90" cy="190" r="5" style="animation-delay: 0.4s" data-value="30" data-month="1月" />
  139.       <circle class="data-point" cx="170" cy="150" r="5" style="animation-delay: 0.8s" data-value="50" data-month="2月" />
  140.       <circle class="data-point" cx="250" cy="120" r="5" style="animation-delay: 1.2s" data-value="65" data-month="3月" />
  141.       <circle class="data-point" cx="330" cy="100" r="5" style="animation-delay: 1.6s" data-value="75" data-month="4月" />
  142.       <circle class="data-point" cx="410" cy="140" r="5" style="animation-delay: 2.0s" data-value="55" data-month="5月" />
  143.       <circle class="data-point" cx="490" cy="80" r="5" style="animation-delay: 2.4s" data-value="85" data-month="6月" />
  144.     </svg>
  145.    
  146.     <div class="tooltip"></div>
  147.   </div>
  148.   
  149.   <script>
  150.     const dataPoints = document.querySelectorAll('.data-point');
  151.     const tooltip = document.querySelector('.tooltip');
  152.    
  153.     dataPoints.forEach(point => {
  154.       point.addEventListener('mouseenter', (e) => {
  155.         const value = e.target.getAttribute('data-value');
  156.         const month = e.target.getAttribute('data-month');
  157.         
  158.         tooltip.textContent = `${month}: ${value}万元`;
  159.         tooltip.style.opacity = '1';
  160.       });
  161.       
  162.       point.addEventListener('mousemove', (e) => {
  163.         tooltip.style.left = e.pageX + 10 + 'px';
  164.         tooltip.style.top = e.pageY - 30 + 'px';
  165.       });
  166.       
  167.       point.addEventListener('mouseleave', () => {
  168.         tooltip.style.opacity = '0';
  169.       });
  170.     });
  171.   </script>
  172. </body>
  173. </html>
复制代码

这个折线图展示了带有动画效果的数据可视化。折线会逐渐绘制出来，数据点会依次淡入，鼠标悬停在数据点上时会显示具体数值。

5.3 交互式用户界面元素

SVG和CSS3动画也可以用于创建交互式用户界面元素，如下面的开关按钮：
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>交互式UI元素</title>
  8.   <style>
  9.     body {
  10.       display: flex;
  11.       justify-content: center;
  12.       align-items: center;
  13.       height: 100vh;
  14.       background-color: #f5f5f5;
  15.       margin: 0;
  16.       font-family: Arial, sans-serif;
  17.     }
  18.    
  19.     .container {
  20.       text-align: center;
  21.     }
  22.    
  23.     .toggle-container {
  24.       margin: 20px 0;
  25.     }
  26.    
  27.     .toggle-label {
  28.       display: inline-block;
  29.       margin-right: 10px;
  30.       font-size: 18px;
  31.       color: #333;
  32.     }
  33.    
  34.     .toggle {
  35.       cursor: pointer;
  36.     }
  37.    
  38.     .toggle-bg {
  39.       fill: #ccc;
  40.       transition: fill 0.3s ease;
  41.     }
  42.    
  43.     .toggle-circle {
  44.       fill: white;
  45.       transition: transform 0.3s ease;
  46.     }
  47.    
  48.     .toggle input:checked + svg .toggle-bg {
  49.       fill: #4CAF50;
  50.     }
  51.    
  52.     .toggle input:checked + svg .toggle-circle {
  53.       transform: translateX(24px);
  54.     }
  55.    
  56.     .status {
  57.       margin-top: 10px;
  58.       font-size: 16px;
  59.       color: #666;
  60.     }
  61.    
  62.     .animated-icon {
  63.       margin: 30px auto;
  64.       width: 100px;
  65.       height: 100px;
  66.     }
  67.    
  68.     .icon-path {
  69.       fill: none;
  70.       stroke: #3498db;
  71.       stroke-width: 3;
  72.       stroke-linecap: round;
  73.       stroke-linejoin: round;
  74.       stroke-dasharray: 100;
  75.       stroke-dashoffset: 100;
  76.       transition: stroke-dashoffset 0.5s ease;
  77.     }
  78.    
  79.     .animated-icon:hover .icon-path {
  80.       stroke-dashoffset: 0;
  81.     }
  82.   </style>
  83. </head>
  84. <body>
  85.   <div class="container">
  86.     <h1>交互式UI元素示例</h1>
  87.    
  88.     <div class="toggle-container">
  89.       <span class="toggle-label">开关</span>
  90.       <label class="toggle">
  91.         <input type="checkbox" style="display: none;">
  92.         <svg width="50" height="26" viewBox="0 0 50 26">
  93.           <rect class="toggle-bg" x="1" y="1" width="48" height="24" rx="12" />
  94.           <circle class="toggle-circle" cx="13" cy="13" r="10" />
  95.         </svg>
  96.       </label>
  97.       <div class="status">状态: <span id="status-text">关闭</span></div>
  98.     </div>
  99.    
  100.     <div class="animated-icon">
  101.       <svg viewBox="0 0 100 100">
  102.         <path class="icon-path" d="M20,50 L40,70 L80,30" />
  103.       </svg>
  104.     </div>
  105.   </div>
  106.   
  107.   <script>
  108.     const toggleInput = document.querySelector('.toggle input');
  109.     const statusText = document.getElementById('status-text');
  110.    
  111.     toggleInput.addEventListener('change', () => {
  112.       if (toggleInput.checked) {
  113.         statusText.textContent = '开启';
  114.       } else {
  115.         statusText.textContent = '关闭';
  116.       }
  117.     });
  118.   </script>
  119. </body>
  120. </html>
复制代码

这个例子展示了一个交互式开关按钮和一个悬停时绘制动画的图标。开关按钮使用SVG和CSS过渡实现平滑的状态切换，图标则使用路径动画在鼠标悬停时绘制出来。

六、最佳实践和注意事项

6.1 设计原则

在使用CSS3动画和SVG创建动态效果时，应遵循以下设计原则：

1. 目的性：每个动画都应有明确的目的，要么提供信息反馈，要么引导用户注意力，要么增强用户体验。
2. 适度性：避免过度使用动画，过多的动画会分散用户注意力，降低用户体验。
3. 一致性：在整个网站或应用中保持动画风格的一致性，包括速度、缓动函数和视觉效果。
4. 性能优先：确保动画不会影响网站的整体性能，特别是在低端设备上。
5. 可访问性：为动画提供替代方案，考虑对动画敏感的用户，提供减少动画的选项。

目的性：每个动画都应有明确的目的，要么提供信息反馈，要么引导用户注意力，要么增强用户体验。

适度性：避免过度使用动画，过多的动画会分散用户注意力，降低用户体验。

一致性：在整个网站或应用中保持动画风格的一致性，包括速度、缓动函数和视觉效果。

性能优先：确保动画不会影响网站的整体性能，特别是在低端设备上。

可访问性：为动画提供替代方案，考虑对动画敏感的用户，提供减少动画的选项。
  2. /* 为减少动画的用户提供替代方案 */
  3. @media (prefers-reduced-motion: reduce) {
  4.   * {
  5.     animation-duration: 0.01ms !important;
  6.     animation-iteration-count: 1 !important;
  7.     transition-duration: 0.01ms !important;
  8.   }
  9. }
复制代码

6.2 常见问题及解决方案

1. SVG动画在不同浏览器中的兼容性问题问题：某些SVG属性在不同浏览器中可能支持不一致。解决方案：使用特性检测，提供备选方案。
2. 问题：某些SVG属性在不同浏览器中可能支持不一致。
3. 解决方案：使用特性检测，提供备选方案。

SVG动画在不同浏览器中的兼容性问题

• 问题：某些SVG属性在不同浏览器中可能支持不一致。
• 解决方案：使用特性检测，提供备选方案。
  2. // 检测浏览器是否支持SMIL动画
  3.    function supportsSmilAnimation() {
  4.      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  5.      return typeof svg.animate === 'function';
  6.    }
  7.    
  8.    if (!supportsSmilAnimation()) {
  9.      // 使用CSS动画或JavaScript动画作为备选方案
  10.    }
复制代码

1. 动画性能问题问题：复杂动画导致页面卡顿或掉帧。解决方案：优化动画属性，使用硬件加速，减少重绘和回流。
2. 问题：复杂动画导致页面卡顿或掉帧。
3. 解决方案：优化动画属性，使用硬件加速，减少重绘和回流。

动画性能问题

• 问题：复杂动画导致页面卡顿或掉帧。
• 解决方案：优化动画属性，使用硬件加速，减少重绘和回流。
  2. /* 使用transform和opacity进行动画，这些属性通常由GPU加速 */
  3.    .optimized-animation {
  4.      will-change: transform, opacity;
  5.      transform: translateZ(0); /* 触发GPU加速 */
  6.    }
复制代码

1. SVG路径动画不流畅问题：路径动画看起来不连贯或有抖动。解决方案：确保路径点足够密集，使用适当的缓动函数。
2. 问题：路径动画看起来不连贯或有抖动。
3. 解决方案：确保路径点足够密集，使用适当的缓动函数。

SVG路径动画不流畅

• 问题：路径动画看起来不连贯或有抖动。
• 解决方案：确保路径点足够密集，使用适当的缓动函数。
  2. .path-animation {
  3.      stroke-dasharray: 1000;
  4.      stroke-dashoffset: 1000;
  5.      animation: draw-path 2s ease-in-out forwards;
  6.    }
  7.    
  8.    @keyframes draw-path {
  9.      to { stroke-dashoffset: 0; }
  10.    }
复制代码

1. 响应式设计中的SVG缩放问题问题：SVG在不同屏幕尺寸下显示不正确。解决方案：使用viewBox属性和preserveAspectRatio。
2. 问题：SVG在不同屏幕尺寸下显示不正确。
3. 解决方案：使用viewBox属性和preserveAspectRatio。

响应式设计中的SVG缩放问题

• 问题：SVG在不同屏幕尺寸下显示不正确。
• 解决方案：使用viewBox属性和preserveAspectRatio。
  2. <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  3.      <!-- SVG内容 -->
  4.    </svg>
复制代码

6.3 调试工具和技巧

1. 浏览器开发者工具

现代浏览器的开发者工具提供了强大的动画调试功能：

• Chrome DevTools的”Animation”面板可以检查和控制动画
• Firefox的”Animation Inspector”可以查看和调试动画

1. 性能分析

使用浏览器的性能分析工具来识别动画中的性能瓶颈：

• Chrome DevTools的”Performance”面板
• Firefox的”Performance”工具

1. 简化测试

在开发复杂动画时，先创建简化版本进行测试，确保基本功能正常后再添加复杂性。

1. 逐步增强

确保基本功能在没有动画的情况下也能正常工作，然后将动画作为增强体验的附加功能。
  2. /* 基本样式 */
  3. .element {
  4.   /* 基本样式 */
  5. }
  7. /* 动画增强 */
  8. @supports (animation: name 1s ease) {
  9.   .element {
  10.     animation: name 1s ease;
  11.   }
  12. }
复制代码

七、总结与展望

7.1 关键要点回顾

本文全面解析了CSS3动画如何赋能SVG图形，从基础应用到高级技巧，帮助设计师和开发者打造流畅生动的网页动态视觉体验。关键要点包括：

1. 基础知识：CSS3动画（过渡和关键帧动画）和SVG的基本概念和语法是创建动态效果的基础。
2. 基础结合应用：通过为SVG元素应用CSS过渡、关键帧动画和路径动画，可以创建简单而有效的动态效果。
3. 中级技巧：SVG组动画、CSS变量和SVG滤镜的结合使用，可以实现更复杂的动画效果和交互。
4. 高级技巧：复杂序列动画、JavaScript交互和性能优化技巧，可以创建专业级的动态体验。
5. 实际应用：加载动画、数据可视化和交互式UI元素是CSS3动画和SVG结合的典型应用场景。
6. 最佳实践：遵循设计原则，解决常见问题，使用适当的调试工具，可以确保动画效果既美观又高效。

基础知识：CSS3动画（过渡和关键帧动画）和SVG的基本概念和语法是创建动态效果的基础。

基础结合应用：通过为SVG元素应用CSS过渡、关键帧动画和路径动画，可以创建简单而有效的动态效果。

中级技巧：SVG组动画、CSS变量和SVG滤镜的结合使用，可以实现更复杂的动画效果和交互。

高级技巧：复杂序列动画、JavaScript交互和性能优化技巧，可以创建专业级的动态体验。

实际应用：加载动画、数据可视化和交互式UI元素是CSS3动画和SVG结合的典型应用场景。

最佳实践：遵循设计原则，解决常见问题，使用适当的调试工具，可以确保动画效果既美观又高效。

7.2 未来发展趋势

随着Web技术的不断发展，CSS3动画和SVG的结合应用也在不断演进，未来发展趋势包括：

1. Web Animations API：这是一个新的JavaScript API，提供了更强大、更灵活的动画控制能力，可以与CSS动画和SVG动画无缝集成。
  2. // 使用Web Animations API
  3.    const element = document.querySelector('.element');
  4.    const keyframes = [
  5.      { transform: 'translateX(0px)' },
  6.      { transform: 'translateX(100px)' }
  7.    ];
  8.    const options = {
  9.      duration: 1000,
  10.      iterations: Infinity
  11.    };
  12.    const animation = element.animate(keyframes, options);
复制代码

1. Houdini：这是一组新的API，允许开发者直接扩展CSS，创建自定义属性和动画，为SVG动画提供更多可能性。
2. WebGL与SVG结合：通过WebGL渲染SVG，可以实现更复杂的视觉效果和更高的性能。
3. 响应式动画：随着设备多样性的增加，创建能够适应不同屏幕尺寸和交互方式的动画将变得更加重要。
4. 可访问性动画：考虑到所有用户的需求，包括那些对动画敏感的用户，创建更加包容性的动画设计将成为标准实践。

Houdini：这是一组新的API，允许开发者直接扩展CSS，创建自定义属性和动画，为SVG动画提供更多可能性。

WebGL与SVG结合：通过WebGL渲染SVG，可以实现更复杂的视觉效果和更高的性能。

响应式动画：随着设备多样性的增加，创建能够适应不同屏幕尺寸和交互方式的动画将变得更加重要。

可访问性动画：考虑到所有用户的需求，包括那些对动画敏感的用户，创建更加包容性的动画设计将成为标准实践。

7.3 持续学习资源

为了持续提升CSS3动画和SVG的应用技能，以下资源可能会有所帮助：

1. MDN Web文档：提供关于CSS动画和SVG的权威文档和示例。CSS动画SVG
2. CSS动画
3. SVG
4. CSS-Tricks：提供大量关于CSS动画和SVG的教程和技巧。CSS-Tricks SVG指南
5. CSS-Tricks SVG指南
6. CodePen：一个社区平台，可以找到许多CSS动画和SVG的创意示例和代码。
7. 书籍：《SVG Essentials》(J. David Eisenberg)《CSS Animation: An Interactive Guide》(Val Head)
8. 《SVG Essentials》(J. David Eisenberg)
9. 《CSS Animation: An Interactive Guide》(Val Head)
10. 在线课程：Frontend Masters的”Advanced SVG Animations”课程LinkedIn Learning的”CSS: Animation”课程
11. Frontend Masters的”Advanced SVG Animations”课程
12. LinkedIn Learning的”CSS: Animation”课程

MDN Web文档：提供关于CSS动画和SVG的权威文档和示例。

• CSS动画
• SVG

CSS-Tricks：提供大量关于CSS动画和SVG的教程和技巧。

• CSS-Tricks SVG指南

CodePen：一个社区平台，可以找到许多CSS动画和SVG的创意示例和代码。

书籍：

• 《SVG Essentials》(J. David Eisenberg)
• 《CSS Animation: An Interactive Guide》(Val Head)

在线课程：

• Frontend Masters的”Advanced SVG Animations”课程
• LinkedIn Learning的”CSS: Animation”课程

通过不断学习和实践，设计师和开发者可以充分利用CSS3动画和SVG的强大功能，创造出更加引人入胜、交互性更强的网页体验，提升用户参与度和满意度。
赋能, 参与度, 动画, 网页, 交互
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

友情链接

keba
磕巴白菜
别管 别听 就是玩
二次元论坛
二次元论坛
按下F逃离世界！
次元宅社
次元宅社
开放、共创，CHANGE SEKAI！
频道订阅

频道订阅

加入社群

加入社群

联系我们|TG频道|RSS

Powered by Pixtech

© 2025 Pixtech Team.