飞道的博客

疫情散去想看电影,用css动画模拟一个阿凡达2完美开场

531人阅读  评论(0)

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

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

目录

 

实现思路 

久违的影院布局

小海报的定位

 不断放大的影院效果

源代码:

 结语:


 

实现思路 

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

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

 

久违的影院布局

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

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

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

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

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


  
  1. <style type="text/css">
  2. body {
  3. margin: 0;
  4. padding: 0;
  5. width: 100%;
  6. height: 100vh;
  7. background: url( ./screen.png) no-repeat;
  8. background-size: 100% 100%;
  9. }
  10. </style>

 

小海报的定位

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

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


  
  1. img {
  2. width: 7.6vw;
  3. height: 5.2vh;
  4. position: absolute;
  5. top: 0;
  6. right: 0;
  7. bottom: 0;
  8. left: 0;
  9. margin: auto;
  10. }

 

 不断放大的影院效果

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


  
  1. img {
  2. /* 上一步css的代码内容 */
  3. animation: moviefn 2s;
  4. animation-fill-mode: forwards;
  5. }
  6. @keyframes moviefn
  7. {
  8. from {
  9. width: 7.6vw;
  10. height: 5.2vh;
  11. top: 0;
  12. right: 0;
  13. bottom: 0;
  14. left: 0;
  15. }
  16. to {
  17. width: 76vw;
  18. height: 52vh;
  19. top: 16%;
  20. right: 11%;
  21. bottom: 24%;
  22. left: 11%;
  23. }
  24. }

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

 

源代码:


  
  1. <!DOCTYPE html>
  2. < html>
  3. <head>
  4. <meta charset="utf- 8" />
  5. <title>阿凡达 2</title>
  6. <style type="text/css">
  7. body {
  8. margin: 0;
  9. padding: 0;
  10. width: 100%;
  11. height: 100vh;
  12. background: url( ./screen.png) no-repeat;
  13. background-size: 100% 100%;
  14. }
  15. img {
  16. width: 7.6vw;
  17. height: 5.2vh;
  18. position: absolute;
  19. top: 0;
  20. right: 0;
  21. bottom: 0;
  22. left: 0;
  23. margin: auto;
  24. animation: moviefn 2s;
  25. animation-fill-mode: forwards;
  26. }
  27. @keyframes moviefn
  28. {
  29. from {
  30. width: 7.6vw;
  31. height: 5.2vh;
  32. top: 0;
  33. right: 0;
  34. bottom: 0;
  35. left: 0;
  36. }
  37. to {
  38. width: 76vw;
  39. height: 52vh;
  40. top: 16%;
  41. right: 11%;
  42. bottom: 24%;
  43. left: 11%;
  44. }
  45. }
  46. </style>
  47. </head>
  48. < body>
  49. < img src="./scroll1 .png" />
  50. </ body>
  51. </ html>

 

 结语:

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

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

 

 


转载:https://blog.csdn.net/xingyu_qie/article/details/128308888
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场