前言
《黑神话：悟空》横空出世，点燃了整个游戏行业的热情，一周来，坐稳了中国首款顶级3A大作的位置，想必各位小伙伴们都上车了！趁着热度和大家从前端的角度的出发，了解一下有电影效果的"黑悟空"实现吧！
一、先从网站看起
先从《黑神话：悟空》网站看起吧！
有一说一，《黑神话：悟空》网站游戏风格沉浸感，扑面而来，这个动态的"直面天命"悟空铺满全屏。采用黑色为主色调，营造出一种神秘、庄重的视觉效果。
于是我们打开控制台，看看他是怎么实现的
好吧，是一个mp4视频！其实实现这类效果，有经验的前端来说很多方式。这里我们介绍一种纯CSS来实现类似的效果！
二、CSS实现有电影效果的"黑悟空"
专业视频剪辑的同学基本上知道 Ken Burns特效,这是一种以电影制片人肯·伯恩斯 (Ken Burns) 命名的平移和缩放技术，Ken Burns 效果是一种图片在切换之前，会缓慢在页面移动或者放大缩小，然后再慢慢切换过去。这样的效果使得每一张静止图片都有动态的效果感觉。类似的效果在电子相册，或者在电影视频对静态图片的处理中经常可见。
在网页设计中，背景图像是一个重要的视觉元素，可以增强页面的吸引力和用户体验。因为这个实现比较简单：
一、我们就新建一个HTML文件，把"黑悟空"图片先保存下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑神话：悟空</title>
<style>
body{
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
}
.image-container {
width: 100%;
height: 100vh;
overflow: hidden;
background: url(img/icon-home-news.png) 100% 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
animation: move-up-down 3s infinite ease-in-out;
}
@keyframes move-up-down {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="image-container">
<img src="img/wukong.png" alt="黑悟空">
</div>
</body>
</html>
二、 我们创建一个 .image-container 类,用来包裹图片,并设置固定的宽高和 overflow: hidden 属性,隐藏图片超出容器的部分。
三、 给图片设置 width: 100%、height: 100% 和 object-fit: cover 属性,使图片完全填充容器。
四 使用 animation 属性定义了一个名为 move-up-down 的动画。这个动画会让图片在垂直方向上上下移动。
五、 在 @keyframes 规则中,我们定义了动画的关键帧。动画会在 3 秒内循环播放,图片会在 0% 时位于原始位置,在 50% 时上移 20 像素,在 100% 时回到原始位置。
源码
通过这种方式,我们就可以让'悟空'图片自然地上下动起来,营造一种生动的效果。你可以根据需要调整动画时间、上下移动的距离等参数,以达到理想的效果。如下图：
三、CSS实现有电影效果应用场景拓展
我们可以使用多个背景而不是一个背景来让事情变得更有趣。或者如果我们扩展规则以使用元素而不是背景图像，我们可以将相同的动画应用于所有背景，并使用少量来animation-delay交错效果，例如这个黑神话的图，我们让它有电影感，源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #000;
}
.ken {
animation: kenny 60s linear;
background-image:url(img/105_sch_1724689979293643365.jpg);
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
opacity: 1;
overflow: hidden;
scale: 2;
}
@keyframes kenny {
100% {
opacity: 0;
scale: 1;
}
}
</style>
</head>
<body>
<div class="ken"></div>
</body>
</html>
如果你想获得更好的想法，CodePen上有很多不错的应用例子。
回想起 Sarah Drasner 2016 年的作品的万圣节快乐很丝滑,这是一个很好的例子，它分层背景并以不同的速度移动它们，创造了一种近乎电影般的体验！动画重复时无缝重复！
结束
本次前端用CSS实现有电影效果的"黑悟空"，就和大家分享到这里。在网页设计中，背景图像是一个重要的视觉元素，可以增强页面的吸引力和用户体验，我们可以将大量其他巧妙的交互应用于图片或者背景，如果你有好的想法，可以在评论区分享~
