阿凡达3d电影什么时候上映（疫情散去想看电影，使用css3动画实现一个阿凡达2完美开场）

时间2025-06-20 18:25:27分类IT科技浏览4447

导读：在历经了艰苦卓绝的3年抗疫后，疫情终于还是来了，很多小伙伴变成了小洋人酸奶，我相信过不了多少天，疫情终将散去，那个时候就可以和家人走进电影院啦。...

在历经了艰苦卓绝的3年抗疫后，疫情终于还是来了，很多小伙伴变成了小洋人酸奶，我相信过不了多少天，疫情终将散去，那个时候就可以和家人走进电影院啦。

今天用css布局一个阿凡达2的影院场景，提前过一过瘾。

实现思路

久违的影院布局

小海报的定位

不断放大的影院效果

源代码：

结语：

实现思路

通过一张我们久违的电影院图片做为全屏的背景图，注意，是全屏哦，要将图片宽高全部占满，而且不能出现滚动条；

找一行阿凡达的海报，利用css定位，准确无误的定位到荧幕中央，并且实现海报内容的动画效果。

久违的影院布局

首先，我们找一张电影院背景图片，注意，找到的图片很难适合我们浏览器的屏幕尺寸，那么就要注意css中background-size的作用

background-size: cover // 表示以图片宽为基准渲染图片，只是满足图片的宽，高能显示多少显示多少

background-size: contain // 表示以图片高为基准渲染图片，只是满足图片的高，宽能显示多少显示多少

所以这里我们用了background-size: 100% 100%

而且要给body的高设定 height: 100vh ，如果设定100% 的话，相当于0 ，代码如下：

小海报的定位

我们找到一张充满充满阿凡达特质的海报图片，注意，首先要将图片缩小放置荧幕中央，这里用到了position的定位

而且要用到一个居中的实现方式，当然垂直居中，水平居中的方式还有很多，这里我们采用如下代码实现：

img { width: 7.6vw; height: 5.2vh; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }

不断放大的影院效果

这里主要采用css3的animation来实现，使这张缩小的海报，2s时间内放大到荧幕的宽度，这里需要注意一点的是，css3的animation动画很可能会播放到最后一帧，又回复到第一帧，这里我们采用了 animation-fill-mode: forwards的属性，使动画播放完成后，停留在最后一帧

img { /* 上一步css的代码内容 */ animation: moviefn 2s; animation-fill-mode: forwards; } @keyframes moviefn { from { width: 7.6vw; height: 5.2vh; top: 0; right: 0; bottom: 0; left: 0; } to { width: 76vw; height: 52vh; top: 16%; right: 11%; bottom: 24%; left: 11%; } }

是不是很有一种影院坐在最后一排的感觉了，阿凡达正在抚摸着宠物的头，告诉他，疫情马上就要过去了，你再坚持坚持，你又可以出厂了，只能休息一会儿哦。

源代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>阿凡达2</title> <style type="text/css"> body { margin: 0; padding: 0; width: 100%; height: 100vh; background: url(./screen.png) no-repeat; background-size: 100% 100%; } img { width: 7.6vw; height: 5.2vh; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; animation: moviefn 2s; animation-fill-mode: forwards; } @keyframes moviefn { from { width: 7.6vw; height: 5.2vh; top: 0; right: 0; bottom: 0; left: 0; } to { width: 76vw; height: 52vh; top: 16%; right: 11%; bottom: 24%; left: 11%; } } </style> </head> <body> <img src="./scroll1.png" /> </body> </html>

结语：

我们经历了3年艰苦卓绝的奋战，终于看见了胜利的曙光，这3年有多少次我们想回家不能回，想做的很多事情做不了，天天被捅嗓子，被大声吆喝：你，扫码，说你呢。有多少次健康码服务器坏了，开发人员想要去楼里修，结果被拦住说你没有绿码不让进，有多少次胆战心惊。

希望最近的批发小洋人是最后一个阶段了，黄桃罐头再也不会脱销，希望疫情烟消云散。

展开全文READ MORE

vue耳机（Vue3 使用MD5加密（清晰明了））