城市夜间行走动画特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148809758

<!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 {
background-color: #000; /* 黑色背景 */
overflow: hidden; /* 隐藏溢出内容 */
height: 100vh; /* 视口高度 */
font-family: Arial, sans-serif; /* 字体设置 */
}

/* 场景容器 */
.scene {
position: relative; /* 相对定位 */
height: 100vh; /* 视口高度 */
perspective: 1000px; /* 3D透视效果 */
}

/* 城市容器 */
.city {
position: absolute; /* 绝对定位 */
bottom: 0; /* 底部对齐 */
width: 100%; /* 宽度100% */
height: 60%; /* 高度60% */
transform-style: preserve-3d; /* 保持3D变换 */
animation: moveCity 20s linear infinite; /* 城市移动动画 */
}

/* 建筑物样式 */
.building {
position: absolute; /* 绝对定位 */
bottom: 0; /* 底部对齐 */
background-color: #111; /* 深灰色背景 */
border-top: 5px solid #333; /* 顶部边框 */
}

/* 建筑物窗户样式 */
.window {
position: absolute; /* 绝对定位 */
background-color: #ffcc00; /* 黄色窗户 */
animation: windowLight 5s infinite alternate; /* 窗户灯光动画 */
}

/* 道路样式 */
.road {
position: absolute; /* 绝对定位 */
bottom: 0; /* 底部对齐 */
width: 100%; /* 宽度100% */
height: 20%; /* 高度20% */
background-color: #222; /* 深灰色道路 */
}

/* 道路标记线 */
.road-line {
position: absolute; /* 绝对定位 */
width: 100px; /* 宽度100px */
height: 10px; /* 高度10px */
background-color: #fff; /* 白色标记线 */
animation: moveLine 1s linear infinite; /* 标记线移动动画 */
}

/* 月亮样式 */
.moon {
position: absolute; /* 绝对定位 */
top: 10%; /* 顶部位置 */
right: 10%; /* 右侧位置 */
width: 80px; /* 宽度80px */
height: 80px; /* 高度80px */
background-color: #fff; /* 白色月亮 */
border-radius: 50%; /* 圆形 */
box-shadow: 0 0 50px #fff, 0 0 100px #fff; /* 发光效果 */
}

/* 星星样式 */
.star {
position: absolute; /* 绝对定位 */
background-color: #fff; /* 白色星星 */
border-radius: 50%; /* 圆形 */
animation: twinkle 2s infinite alternate; /* 闪烁动画 */
}

/* 人物行走动画 */
.person {
position: absolute; /* 绝对定位 */
bottom: 20%; /* 底部位置 */
left: 50%; /* 居中 */
transform: translateX(-50%); /* X轴居中 */
width: 30px; /* 宽度30px */
height: 60px; /* 高度60px */
background-color: #333; /* 深灰色人物 */
border-radius: 50% 50% 0 0; /* 圆形顶部 */
animation: walk 1s steps(4) infinite; /* 行走动画 */
}

/* 人物头部 */
.person::before {
content: ''; /* 伪元素内容 */
position: absolute; /* 绝对定位 */
top: -15px; /* 顶部位置 */
left: 5px; /* 左侧位置 */
width: 20px; /* 宽度20px */
height: 20px; /* 高度20px */
background-color: #333; /* 深灰色头部 */
border-radius: 50%; /* 圆形 */
}

/* 人物腿部 */
.person::after {
content: ''; /* 伪元素内容 */
position: absolute; /* 绝对定位 */
bottom: -10px; /* 底部位置 */
left: 5px; /* 左侧位置 */
width: 5px; /* 宽度5px */
height: 20px; /* 高度20px */
background-color: #333; /* 深灰色腿部 */
transform-origin: top center; /* 变换原点 */
animation: legMove 0.5s infinite alternate; /* 腿部移动动画 */
}

/* 右侧腿部 */
.person::after:last-child {
left: 20px; /* 右侧位置 */
animation-delay: 0.25s; /* 动画延迟 */
}

/* 城市移动动画 */
@keyframes moveCity {
0% {
transform: translateX(0); /* 初始位置 */
}
100% {
transform: translateX(-50%); /* 向左移动50% */
}
}

/* 窗户灯光动画 */
@keyframes windowLight {
0%, 100% {
opacity: 0.3; /* 透明度变化 */
}
50% {
opacity: 1; /* 完全显示 */
}
}

/* 道路标记线动画 */
@keyframes moveLine {
0% {
transform: translateX(0); /* 初始位置 */
}
100% {
transform: translateX(-200px); /* 向左移动200px */
}
}

/* 星星闪烁动画 */
@keyframes twinkle {
0% {
opacity: 0.2; /* 透明度变化 */
}
100% {
opacity: 1; /* 完全显示 */
}
}

/* 人物行走动画 */
@keyframes walk {
0% {
background-position: 0 0; /* 初始位置 */
}
100% {
background-position: -120px 0; /* 向左移动120px */
}
}

/* 腿部移动动画 */
@keyframes legMove {
0% {
transform: rotate(-20deg); /* 旋转角度 */
}
100% {
transform: rotate(20deg); /* 反向旋转 */
}
}

/* 网站链接样式 */
.website-link {
position: absolute; /* 绝对定位 */
bottom: 10px; /* 底部位置 */
right: 10px; /* 右侧位置 */
color: #fff; /* 白色文字 */
font-size: 14px; /* 字体大小 */
text-decoration: none; /* 无下划线 */
z-index: 100; /* 层级 */
}
</style>
</head>
<body>
<div class="scene">

<div class="moon"></div>


<div class="star" style="top: 15%; left: 20%; width: 2px; height: 2px;"></div>
<div class="star" style="top: 25%; left: 80%; width: 3px; height: 3px;"></div>
<div class="star" style="top: 10%; left: 50%; width: 2px; height: 2px;"></div>
<div class="star" style="top: 30%; left: 30%; width: 3px; height: 3px;"></div>
<div class="star" style="top: 20%; left: 70%; width: 2px; height: 2px;"></div>


<div class="city">

<div class="building" style="left: 0; width: 100px; height: 200px;">
<div class="window" style="top: 50px; left: 20px; width: 10px; height: 15px;"></div>
<div class="window" style="top: 50px; left: 70px; width: 10px; height: 15px;"></div>
<div class="window" style="top: 100px; left: 20px; width: 10px; height: 15px;"></div>
<div class="window" style="top: 100px; left: 70px; width: 10px; height: 15px;"></div>
</div>


<div class="building" style="left: 150px; width: 150px; height: 300px;">
<div class="window" style="top: 80px; left: 30px; width: 15px; height: 20px;"></div>
<div class="window" style="top: 80px; left: 105px; width: 15px; height: 20px;"></div>
<div class="window" style="top: 150px; left: 30px; width: 15px; height: 20px;"></div>
<div class="window" style="top: 150px; left: 105px; width: 15px; height: 20px;"></div>
<div class="window" style="top: 220px; left: 30px; width: 15px; height: 20px;"></div>
<div class="window" style="top: 220px; left: 105px; width: 15px; height: 20px;"></div>
</div>


<div class="building" style="left: 350px; width: 120px; height: 250px;">
<div class="window" style="top: 70px; left: 25px; width: 10px; height: 15px;"></div>
<div class="window" style="top: 70px; left: 85px; width: 10px; height: 15px;"></div>
<div class="window" style="top: 130px; left: 25px; width: 10px; height: 15px;"></div>
<div class="window" style="top: 130px; left: 85px; width: 10px; height: 15px;"></div>
<div class="window" style="top: 190px; left: 25px; width: 10px; height: 15px;"></div>
<div class="window" style="top: 190px; left: 85px; width: 10px; height: 15px;"></div>
</div>
</div>


<div class="road">
<div class="road-line" style="bottom: 50%; left: 0;"></div>
<div class="road-line" style="bottom: 50%; left: 200px;"></div>
<div class="road-line" style="bottom: 50%; left: 400px;"></div>
<div class="road-line" style="bottom: 50%; left: 600px;"></div>
</div>


<div class="person"></div>

</div>
</body>
</html>