疫情散去想看电影,使用css3动画实现一个阿凡达2完美开场
在历经了艰苦卓绝的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年有多少次我们想回家不能回,想做的很多事情做不了,天天被捅嗓子,被大声吆喝:你,扫码,说你呢。有多少次健康码服务器坏了,开发人员想要去楼里修,结果被拦住说你没有绿码不让进,有多少次胆战心惊。
希望最近的批发小洋人是最后一个阶段了,黄桃罐头再也不会脱销,希望疫情烟消云散。
疫情散去想看电影,使用css3动画实现一个阿凡达2完美开场相关推荐
- python 爬虫 小电影 不会告诉网址_想看电影不知道看啥,python爬虫告诉你!
闲着在家想看电影,但是猛地不知道要看啥电影,脑子想半天也想不出来一个好电影名字!干脆直接在豆瓣电影上获取最近热门的电影,然后一个一个挨着看打发时间! 获取豆瓣电影信息也是学爬虫的一个入门例子,不知道为 ...
- 动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
- 使用css3动画做一个简单的灯泡发光模拟
使用css3动画做一个简单的灯泡发光模拟,图片我特意上传到了图床,你也可以试试. <!DOCTYPE html> <html lang="en"> < ...
- 当 IT 直男约女生去看电影
他是真的想看电影啊
- android可看电视吗,不要VIP也能看电影,安卓手机这4款APP太赞了!
原标题:不要VIP也能看电影,安卓手机这4款APP太赞了! 都说现在的人愿意花几百块钱去买衣服,买游戏装备,买化妆品,却不愿愿意花19块钱去充个会员,你是这样的吗? 哈哈,反正我是.尽管马化腾大哥说& ...
- 互联网电影上线,手机电影院移动端就可以看电影
热爱看电影的小伙伴一定有过这样的烦恼:在旅游途中无法观看新上映的影片:在繁忙的工作中无暇抽身去影院看电影,想看的小众电影没有排片:大师新作只看一遍看不懂,想多看一遍.怎么办呢? 不要着急,互联网电影院 ...
- 没有Wifi怎样用iPad2/iPad看电影
没有Wifi的地方太多了,可没有Wifi就能影响我们玩iPad吗?不可能!作为时下最流行的热门礼物,苹果iPad2和iPad成为了很多长辈送学生的首选,时尚精巧的苹果iPad2和iPad不仅外表华丽, ...
- ddddyla看电影项目总结
项目开发总结报告 1引言 1.1编写目的 在移动软件开发课程中,学习了微信小程序的开发,小组成员课下应用所学内容合作完成了"ddddyla看电影"的微信小程序项目.为了让老师了解小 ...
- 计算机对电影工业的影响的英语作文,看电影的好处The Advantages of Watching Movies
With the fast development of science and technology and the widespread of internet, watching movies ...
最新文章
- maven 命令创建多模块工程
- 设置窗口大小后无法滚动_新款奥迪A6L更换变速器机电单元后无法完成油冷却阀基本设置...
- python嵌套列表元素和_Python嵌套列表内部比较和编辑
- MindCon | 当「赛博朋克」遇到「AI极客」会发生什么?
- python结课报告_Python数据分析课程到底是学什么内容的?
- 基于canny的边缘检测算法:
- 【Docker】07 Docker网络
- Vue经典开源项目汇总
- 矢量控制——SVPWM
- 维护和维修涉密计算机网络 必须严格采取,安全保密管理员主要负责涉密网络的日常安全保密管理工作,包括()。A.涉密网络的日常运行维护工 - 普法考试题库问答...
- 5.信道带宽、信道容量、香农公式
- android连接wifi不能上网,手机wifi连接上但不能上网怎么办
- html控制台 打印 consol,浏览器console.log()打印输出台不显示输出内容……
- js 大数字单位处理 千、万、千万、亿....
- Android 一键拨号
- 计算机二级vb选择题分值,计算机二级VB考试的考试分值和考试题型剖析及解题技巧...
- matlab机器人轨迹规划仿真程序,基于MATLAB_Robotics工具箱的工业机器人轨迹规划及仿真研究...
- 骁龙778gplus和骁龙870差多少 哪个好
- 126day(继续阅读Core Java4.5)
- pip 安装第三方库
热门文章
- Android开发-营养成分查询Demo(1)前言-AndroidStudio
- vue使用qrcodejs2生成带log的二维码图片,vue生成二维码图片中间带log,自定义log
- Leetcode139.单词拆分
- gis投影中未定义的地理转换_“2000坐标”成了标配,你还不懂坐标系定义和转换吗?...
- 卜若的代码笔记-数据结构系列-第十二章:栈三.链栈
- 【云服务器】阿里云服务器遭遇挖矿病毒、被远控的解决方法(亲测有效)
- 『金融帝国实验室』(Capitalism Lab)〔精品攻略①〕《品牌策略的选择和品牌评级的说明》(作者:小富)
- 牛客小白月赛28 A牛牛和牛可乐的赌约 (数论-费马小定理)
- 1970年至今(2007/7/20)原油价格走势图
- 百无聊赖时对java类初始化先后顺序的测试