网页动画案例库
浏览精选的网页动画案例
精选推荐
移开即停止播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科技感赛车男孩 - 动效驱动</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #020617;
font-family: 'Courier New', Courier, monospace, 'No
小男孩在开汽车
2.4K
移开即停止播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科技感跑者 - 动效驱动视差叙事</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #F0FDF4; /* 背景要求 */
font-family: 'Inter', 'Noto Sans SC',
一个男孩在公园里跑步
2.4K
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
export default function SilkRoadSearchAnimation() {
const [phase, setPhase] = useState('typing'); // typing, moving, loading, results, scrolling
const [typedText, setTypedText] = useState("");
const [mousePos, setMousePos] = useState({ x: 800, y: 500 });
const [isClick
画面主体为一个极简风格的现代搜索引擎界面，背景采用柔和的米白
2.3K
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
/**
* Modern Search UI Animation
* Features: Material Design, Glassmorphism, Realistic Typing, Smooth Transitions
*/
const WIDTH = 1200;
const HEIGHT = 700;
const SUGGESTIONS = [
"丝绸之路纪录片运镜技巧",
"西北大漠摄影构图指南",
"丝绸之路最佳拍摄季节与光影",
"古丝绸之路人文风情抓拍"
];
const COLORS = {
bg: '#F9F9F7',
searchBox: '#FFFFFF',
te
画面中心呈现一个极简现代风格的UI搜索组件，采用Materi
2.3K
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Calculator, RefreshCcw, Play, Pause } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// 动画阶段定义
const PHASES = {
INTRO: 0, // 初始状态：展示头
ASSUME: 1, // 假设阶段：全部长出2条腿
CALC_DIFF: 2, // 计算差异：展示当前脚数量与实际数量的差
DISTRIBUTE: 3, // 分配补足：多余的脚飞向兔子
REVEAL: 4, // 揭晓结果：变色区分鸡和兔
};
// 问题参数
const TOTAL_HEADS = 8;
const TOTAL_FEET = 26;
// 计算结果: 兔子 = (26 - 8*2) / 2 = 5, 鸡 = 3
// 缓动函数
鸡兔同笼问题解答思路
2.2K
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion } from 'framer-motion';
import { MapPin, Wind, Scroll, RefreshCw, Play, Pause } from 'lucide-react';
// --- 配置常量 ---
const WIDTH = 1200;
const HEIGHT = 700;
const ANIMATION_DURATION = 25000; // 总时长 ms
const BACKGROUND_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8'; // Sky blue
const GOLD_COLOR = '#facc15';
const TEXT_COLOR = '#e2e8f0';
// --- 李白生平轨迹关键节点数据 ---
const LOCATIONS = [
{ id: 1, yea
绘制一个李白一生行踪轨迹的动画，最好在每个停留点上标注时间和
2.3K
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a';
const SERVER_BASE_COLOR = '#1e293b';
const ACCENT_CYAN = '#06b6d4';
const ACCENT_GREEN = '#10b981';
const ACCENT_GOLD = '#f59e0b';
const
创建一个基于等距视角（Isometric）的SVG动画场景，
2.2K
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const COURT_START_X = 400;
const COURT_WIDTH = 750;
const GROUND_Y = 550;
const NET_X = COURT_START_X + COURT_WIDTH / 2;
const NET_HEIGHT = 80;
// Grip Data Configuration
const GRIPS = [
{
id: 'continental',
name: '大陆式 (Continental)',
desc: '锤子握法，适合发球、截击、切削。',
bevel: 2, // Bevel 2
speed: 90,
spin: 20,
trajectory: 'flat',
color: '#38bdf8', /
网球 大陆式 东方式 半西与西方式的区别以及球速的特点
2.3K
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// ----------------------------------------------------------------------
// CONFIGURATION & CONSTANTS
// ----------------------------------------------------------------------
const WIDTH = 1600;
const HEIGHT = 900;
const CENTER_X = WIDTH / 2;
const CENTER_Y = HEIGHT / 2;
// Colors
const C_LEFT_BG = '#E5E7EB';
const C_LEFT_FG = '#374151'; // Dark gray for lines/text
const C_LEFT_ACCE
SVG画布尺寸设定为16:9，中间以半透明虚线分割。左半部分
2.2K
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Zap, Activity, Battery, Anchor, Search, Cpu, Wifi, AlertTriangle } from 'lucide-react';
// ----------------------------------------------------------------------
// Constants & Config
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BG_COLOR = "#0f172a";
const ACCENT_COLOR = "#3b82f6";
const SENSO
* 原理：利用铷原子传感器，基于原子自旋极化和磁共振原理的高
2.1K
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const WIDTH = 1000;
const HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#06b6d4'; // Cyan
const SECONDARY_COLOR = '#8b5cf6'; // Violet
const ACCENT_COLOR = '#f43f5e'; // Rose
const TEXT_COLOR = '#e
离子阱检测气体和液体的动画
2.2K