Web Animation Examples Gallery
Browse featured web animation examples
Featured Picks
Playback pauses when you leave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Africa Strategic Network</title>
<style>
:root {
--bg-color: #05080a;
--accent-orange: #ff8c00;
--accent-glow: rgba(255, 140, 0, 0.6);
--land-color: #1a2228;
--border-color: #2d3748;
--ui-text: #a0aec0;
--highlight-text: #edf2f7;
}
bod
I need a map of Africa, with t
2
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北京中轴线文化之旅</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
:root {
--bg-color: #0a0a0c;
--primary-gold: #d4af37;
--imperial-red: #b32d2e;
--jade-green: #2d5a27;
--metro-blue: #005596;
--text-color: #e0e0e0;
--panel-bg:
Help me generate a map walking animation: Beijing South Railway Station, Metro Line 4 → Shichahai Metro
44
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国工农红军长征史诗地图 - 详细复古版</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3"></script>
<style>
:root {
--parchment-bg: #e8d5b5;
--parchment-dark: #c4a484;
--ink-red: #b22222;
--ink-gold: #d4af37;
Dynamic Map of the Long March of the Chinese Workers' and Peasants' Red Army 1. Theme: Starting from Ruijin, Jiangxi and finally arriving at
66
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行政数字化战略转型全景图</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dagre.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<style>
:root {
--bg-color: #020617;
--primary:
I am the head of administrative digitalization, by consolidating the administrative digitalization foundation: administrative business, catering,
43
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地理定位：湖南茨岩塘</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
:root {
/* 地形地貌配色方案：深绿、土黄、岩石灰、深蓝 */
--land-low: #2d4c2e; /* 低地植被 */
--land-mid: #5d6d3e; /* 丘陵 */
--land-high: #8c7e56; /* 山地 */
--water: #1a3a4a; /* 水系 */
-
Zooming in from the perspective of the map of China to Ciyantang, Hunan, topographic map
43
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1937南京合围全过程：GIS动态时序地图</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3"></script>
<style>
:root {
--bg-deep: #0d0d0d;
--map-land: #1e1e1e;
--map-water: #0a1a2a;
--jp-red: #ff3e3e;
--cn-bl
Generate 80-second 1080P, 16:9 GIS Dynamic Time-Series for High School History Teaching
47
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>春秋古卷：晋国扩张</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
:root {
--parchment-base: #d4b98a;
--ink-black: #1a150e;
--burnt-edge: #3d2b1f;
--cinnabar: #962d22;
--gold-leaf: #a67c00;
--river-blue: #4a5a5a;
}
body, h
Map of the Spring and Autumn Period of ancient China, parchment texture, traditional Chinese realistic painting style. Slow vertical camera movement.
45
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淞沪会战后日军合围南京态势图 (1937.11.13-12.12)</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3"></script>
<style>
:root {
--bg-color: #1a1a1a;
--panel-bg: rgba(30, 30, 30, 0.9);
--text-gold: #e2b04a;
--japan-red
Generate a time-series dynamic GIS historical map short film for high school history teaching, timeline:
51
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红山礼制传播迁徙路线图</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3"></script>
<style>
:root {
--bg: #0a0a0c;
--red-hongshan: #ff3e3e;
--orange-path: #ff9f43;
--green-local: #2ecc71;
--purple-dy
Annotation Script for the Map of Hongshan Ritual System Propagation and Migration Routes (Ready for Mapping: Source Points, 4 Major Routes...)
40
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南疆环线第一视角考察</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
:root {
--bg-dark: #050a10;
--tech-blue: #00f2ff;
--tech-gold: #ffcc00;
--panel-bg: rgba(10, 25, 41, 0.9);
--border-color: rgba(0, 242, 255, 0.4);
--text-main: #e0f7fa;
Starting from Xinjiang Institute of Technology in Wensu County, Aksu, passing through Tuhe Expressway to reach Kuqa Royal Palace, and then
40
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>岭南行迹：广州至化州</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
:root {
--bg-deep: #05080a;
--primary-cyan: #00f2ff;
--accent-gold: #ffcc00;
--path-color: #00f2ff;
--ui-border: rgba(0, 242, 255, 0.3);
--font-main: "Microsoft YaHei", sa
From Guangzhou to Huazhou
21