在历经了艰苦卓绝的3年抗疫后,疫情终于还是来了,很多小伙伴变成了小洋人酸奶,我相信过不了多少天,疫情终将散去,那个时候就可以和家人走进电影院啦。
今天用css布局一个阿凡达2的影院场景,提前过一过瘾。
目录
实现思路
通过一张我们久违的电影院图片做为全屏的背景图,注意,是全屏哦,要将图片宽高全部占满,而且不能出现滚动条;
找一行阿凡达的海报,利用css定位,准确无误的定位到荧幕中央,并且实现海报内容的动画效果。
久违的影院布局
首先,我们找一张电影院背景图片,注意,找到的图片很难适合我们浏览器的屏幕尺寸,那么就要注意css中background-size的作用
background-size: cover // 表示以图片宽为基准渲染图片,只是满足图片的宽,高能显示多少显示多少
background-size: contain // 表示以图片高为基准渲染图片,只是满足图片的高,宽能显示多少显示多少
所以这里我们用了background-size: 100% 100%
而且要给body的高设定 height: 100vh ,如果设定100% 的话,相当于0,代码如下:
-
<style type="text/css">
-
body {
-
margin:
0;
-
padding:
0;
-
width:
100%;
-
height:
100vh;
-
background:
url(
./screen.png) no-repeat;
-
background-size:
100%
100%;
-
}
-
</style>
小海报的定位
我们找到一张充满充满阿凡达特质的海报图片,注意,首先要将图片缩小放置荧幕中央,这里用到了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年有多少次我们想回家不能回,想做的很多事情做不了,天天被捅嗓子,被大声吆喝:你,扫码,说你呢。有多少次健康码服务器坏了,开发人员想要去楼里修,结果被拦住说你没有绿码不让进,有多少次胆战心惊。
希望最近的批发小洋人是最后一个阶段了,黄桃罐头再也不会脱销,希望疫情烟消云散。
转载:https://blog.csdn.net/xingyu_qie/article/details/128308888