网页动画案例库
浏览精选的网页动画案例
精选推荐
移开即停止播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tencent Logo 手绘动画</title>
<style>
* { box-sizing: border-box; }
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at top, rgba(0, 82, 217, 0.08), transparent 40%),
linear-gradient(180deg, #fffcf9 0%, #fcfdfe 100%);
}
body {
腾讯图标-svgrepo-com.svg
30
移开即停止播放
<!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>
:root {
--primary-orange: #f97316;
--amber-glow: rgba(251, 191, 36, 0.6);
--bg-cream: #fdfbf7;
--charcoal: #334155;
--sage: #86efac;
--dusty-indigo: #475569;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
width: 100%;
h
视频提示词（Visual / Video Prompt）：
28
移开即停止播放
<!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>
* { box-sizing: border-box; }
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at top, rgba(56, 189, 248, 0.1), transparent 40%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
body {
posi
体育课立定跳远的演示视频完整知识点和技术动作
82
移开即停止播放
<!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>
* { box-sizing: border-box; }
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fdf6e3; /* 米黄色纯色背景 */
}
body {
position: relative;
display: grid;
place-items: center;
font-family: "PingFang SC", "Micro
【米黄色纯色背景】 白色火柴人歪头坏笑，旁边弹出黑色线条的思
103
移开即停止播放
<!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>
* { box-sizing: border-box; }
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at top, rgba(251,146,60,0.12), transparent 34%),
linear-gradient(180deg, #fffcf9 0%, #fff5eb 100%);
}
body {
po
创建一个温馨街角咖啡馆场景的手绘 SVG 动画。让画面像被现
90
移开即停止播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG 动态绘制</title>
<style>
* { box-sizing: border-box; }
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at top, rgba(251,146,60,0.12), transparent 34%),
linear-gradient(180deg, #fff8f1 0%, #fffaf5 100%);
}
body {
position
一只猫在讲勾股定理
134
移开即停止播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG 动态绘制</title>
<style>
* { box-sizing: border-box; }
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at top, rgba(251,146,60,0.12), transparent 34%),
linear-gradient(180deg, #fff8f1 0%, #fffaf5 100%);
}
body {
position
画一只圣诞老人，细节要丰富
123
广告
Ads已经到底了