网页动画案例库
浏览精选的网页动画案例
精选推荐
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Rat Race - Animation</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Ge
风格说明（粘贴第一部分
4
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Island Full of Snakes</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Gene
满是蛇的岛屿
4
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stickman Sword Duel - Golden Beach</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
两个极简黑色火柴人
2
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stickman Dream Sequence - Shot 1</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #050510;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#container {
镜头 1 — 室内。卧室 – 夜晚
2
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fire vs Ice: Legendary Clash</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #050505;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
创建一个流畅的 2D 火柴人
2
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Sunday Realization - Stickman Animation</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
火柴人起床晚了，匆忙赶路
4
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stickman Epic Duel - Vertical</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #050505;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
两个火柴人使用各种技能战斗
4
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Choice - Stickman Animation</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
一个可怜的小火柴人男孩
6
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Transformation - Cinematic Animation</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #050505;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Seg
风格：3D 动画表情符号，Pix
5
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Stickman Run & Talk</title>
<style>
:root {
--bg-color: #05070a;
--primary-blue: #00d2ff;
--primary-green: #39ff14;
--text-color: #ffffff;
--grid-color: rgba(0, 210, 255, 0.1);
}
body, html {
margin: 0;
padding: 0;
两个火柴人在跑步
8
移开即停止播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimalist Stickman Journey</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Segoe UI', Tahoma,
简单的火柴人动画，bla
6