网页动画案例库
浏览精选的网页动画案例
精选推荐
移开即停止播放
<!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
我需要一张非洲地图，带有
2
移开即停止播放
<!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:
帮我生成一个地图行走动图： 北京南站，地铁4号线→什刹海地铁
44
移开即停止播放
<!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;
中国工农红军长征动态地图 1. 主题：从江西瑞金出发最终到达
66
移开即停止播放
<!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:
我是行政数字化负责人，通过夯实行政数字化底座：行政端业，食，
43
移开即停止播放
<!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; /* 水系 */
-
从中国版图视角拉进放大到湖南茨岩塘，地形图
43
移开即停止播放
<!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
生成80秒1080P、16:9高中历史教学专用GIS动态时序
47
移开即停止播放
<!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
中国古代春秋时期地图，羊皮纸质感，工笔重彩风格。镜头缓慢垂直
45
移开即停止播放
<!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
生成时序动态 GIS 历史地图短片，面向高中历史教学，时序：
51
移开即停止播放
<!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
# 红山礼制传播迁徙路线图标注文案（可直接制图：分源点、4大
40
移开即停止播放
<!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;
从阿克苏温宿县新疆理工学院出发，经吐和高速到达库车王府，再由
40
移开即停止播放
<!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
从广州出发到化州
21