SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useEffect, useRef } from 'react';
const RedBlueWarfare = () => {
const canvasRef = useRef(null);
const containerRef = useRef(null);
// 使用 Ref 存储动画状态，避免 React 渲染循环
const gameState = useRef({
frame: 0,
width: 0,
height: 0,
redNodes: [],
blueNodes: [],
centerNode: { x: 0, y: 0, health: 100, maxHealth: 100, shield: 100 },
packets: [], // 传输的数据包/攻击
particles: [], // 爆炸碎片
logs: [], // 滚动日志
scanLineY: 0
});
useEffect(() => {
c
生成一个红蓝对抗网络攻防的图片
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BG_COLOR = "#0f172a";
const PRIMARY_COLOR = "#38bdf8"; // sky-400
const ACCENT_COLOR = "#f472b6"; // pink-400
const SUCCESS_COLOR = "#4ade80"; // green-400
const GRID_COLOR = "#1e293b";
// 模拟神经网络结构
const LAYERS = [4, 6, 6, 3]; // Input, Hidden 1, Hidden 2, Output
export const ModelTrainingView = () => {
// 状态管理
const [phase, setPhase] = useState<'IDLE
生成一个训练模型完整的步骤
移开即停止播放
import React, { useState, useEffect, useMemo } from 'react';
const ModelExplainer = () => {
const [phase, setPhase] = useState(0);
const [timer, setTimer] = useState(0);
// Phases:
// 0: Transformer (Base)
// 1: BERT (Encoder-only)
// 2: T5 (Encoder-Decoder Unified)
// 3: ChatGPT/GPT (Decoder-only)
// 4: Summary/Comparison
const PHASE_DURATION = 8000; // ms per phase
const TOTAL_PHASES = 5;
useEffect(() => {
const interval = setInterval(() => {
setTimer(t =>
帮我讲解trafermer、bert、t5、ChatGPT模
移开即停止播放
'use client';
import React, { useState, useEffect } from 'react';
const CSharpStringImmutability = () => {
const [step, setStep] = useState(0);
const [cycle, setCycle] = useState(0);
// Animation constants
const TIMINGS = {
INIT: 800,
LINE1_HIGHLIGHT: 800,
LINE1_ALLOC: 1500,
LINE2_HIGHLIGHT: 1000,
LINE2_CALC: 1000,
LINE2_ALLOC: 1500,
LINE2_REPOINT: 1200,
LINE3_HIGHLIGHT: 1000,
LINE3_CALC: 1000,
LINE3_ALLOC: 1500,
LINE3_REPOINT: 1200,
GC_
用動畫說明C# String 的不變性
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ---------------------------------------------------------
// Constants & Config
// ---------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const TOTAL_PACKETS = 20;
const WINDOW_SIZE = 5;
const PACKET_SIZE = 40;
const GAP = 15;
const SENDER_Y = 150;
const RECEIVER_Y = 450;
const TRAVEL_TIME = 1500; // ms for one way travel
// Colors
const COLORS = {
bg: '
网络协议中的滑动窗口机制
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Coordinate Definitions
const POSITIONS = {
CLIENT: { x: 100, y: 500, label: '用户 (Client)' },
RESOLVER: { x: 400, y: 350, label: '递归解析器 (Local DNS)' },
ROOT: { x: 500, y: 100, label: '根域名服务器 (Root .)' },
TLD: { x: 750, y: 180, label: '顶级域名服务器 (TLD .com)' },
AUTH: { x: 850, y: 400, label: '权威域名服务器 (Auth example.com)' },
};
const COLORS = {
bg: '#0f
域名解析的过程
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：生成随机数据
const randomHex = () => Math.floor(Math.random() * 16).toString(16).toUpperCase();
const generateSectorData = (length = 8) => Array.from({ length }, () => randomHex()).join('');
export default function HardDriveAnimation() {
// 动画状态
const [armAngle, setArmAngle] = useState(20); // 读写臂角度
const [dataParticles, setDataParticles] = useState<any
机械硬盘读取数据
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
export default function PhpTransportAnimation() {
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 400;
// Animation States: 'IDLE', 'PREPARE_GET', 'SEND_GET', 'PROCESS_GET', 'PREPARE_POST', 'SEND_POST', 'PROCESS_POST'
const [phase, setPhase] = useState('IDLE');
const [progress, setProgress] = useState(0); // 0 to 1 for movement
const requestRef = useRef<number>();
const startTimeRef = useRef<number>();
php 中 post get 怎麼傳輸
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ----------------------------------------------------------------------
// CONSTANTS & DATA
// ----------------------------------------------------------------------
const STAGES = [
{ id: 'intel', title: '情报收集', sub: 'Reconnaissance', icon: 'TARGET' },
{ id: 'analysis', title: '攻击面分析', sub: 'Attack Surface', icon: 'SEARCH' },
{ id: 'acces
渗透测试或红队攻击一般遵循“情报收集 → 攻击面分析 → 初
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Utility to format address to Hex string (e.g., 0x1000)
const toHex = (num) => `0x${num.toString(16).toUpperCase()}`;
export default function CPointerAnimation() {
// --- State Management ---
// Memory Array: Addresses and Values
const [memoryBlock, setMemoryBlock] = useState([
{ address: 0x1000, value: 10, highlight: false },
{ address: 0x
**Create a professional, educa
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// Colors
const BG_COLOR = "#0f172a";
const UNITY_COLOR = "#ffffff"; // Unity White/Grey
const UNITY_ACCENT = "#22d3ee"; // Cyan for tech feel
const UNREAL_COLOR = "#ffffff"; // Unreal White
const UNREAL_ACCENT = "#f472b6"; // Pink/Purple for contrast (or Blue) -> Let's use Unreal Blue #3b82f6
c