电影html css页面,纯CSS3构建的电影屏幕效果
CSS
语言：
CSSSCSS
确定
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
.background {
width: 100%;
height: 100%;
background-image: url("/uploads/161001/city--1-min-min.jpg");
background-size: cover;
}
.outer-scratch,
.inner-scratch {
height: inherit;
}
.outer-scratch:after,
.inner-scratch:after {
content: '';
width: 120%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding-left: 100px;
opacity: .08;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/662025/scratch.png") repeat center center;
-webkit-animation: scratch 0.45s steps(1) infinite;
animation: scratch 0.45s steps(1) infinite;
}
.inner-scratch:after {
left: 30%;
-webkit-animation: inner-scratch 2s infinite;
animation: inner-scratch 2s infinite;
}
.grain:after {
content: '';
width: 110%;
height: 110%;
position: absolute;
top: -5%;
left: -5%;
opacity: .11;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/662025/grain.jpg") repeat center center;
-webkit-animation: grain 0.5s steps(1) infinite;
animation: grain 0.5s steps(1) infinite;
}
/* Basic Title */
h1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 3em;
text-align: center;
color: #fff;
-webkit-animation: 3s fade;
animation: 3s fade;
}
h1 span {
display: inline-block;
position: relative;
padding: .5em 1em;
}
h1 span:before {
display: block;
content: '';
width: 110%;
margin-left: -5%;
margin-bottom: 5%;
border-top: 1px solid #fff;
-webkit-animation: 2.5s draw;
animation: 2.5s draw;
}
h1 span:after {
display: block;
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
border-bottom: 1px solid #fff;
-webkit-animation: 2.5s draw-bottom;
animation: 2.5s draw-bottom;
}
/* Film Animations */
@keyframes grain {
0%, 100% {
transform: translate(0, 0, 0);
}
10% {
transform: translate(-1%, -1%);
}
20% {
transform: translate(1%, 1%);
}
30% {
transform: translate(-2%, -2%);
}
40% {
transform: translate(3%, 3%);
}
50% {
transform: translate(-3%, -3%);
}
60% {
transform: translate(4%, 4%);
}
70% {
transform: translate(-4%, -4%);
}
80% {
transform: translate(2%, 2%);
}
90% {
transform: translate(-3%, -3%);
}
}
@keyframes scratch {
0%, 100% {
transform: translateX(0);
opacity: 0.075;
}
10% {
transform: translateX(-1%);
}
20% {
transform: translateX(1%);
}
30% {
transform: translateX(-2%);
opacity: 0.09;
}
40% {
transform: translateX(3%);
}
50% {
transform: translateX(-3%);
opacity: 0.05;
}
60% {
transform: translateX(8%);
}
70% {
transform: translateX(-3%);
}
80% {
transform: translateX(10%);
opacity: 0.02;
}
90% {
transform: translateX(-2%);
}
}
@keyframes inner-scratch {
0% {
transform: translateX(0);
opacity: 0.08;
}
10% {
transform: translateX(-1%);
}
20% {
transform: translateX(1%);
}
30% {
transform: translateX(-2%);
}
40% {
transform: translateX(3%);
}
50% {
transform: translateX(-3%);
opacity: 0.06;
}
60% {
transform: translateX(8%);
}
70% {
transform: translateX(-3%);
}
80% {
transform: translateX(10%);
opacity: 0.03;
}
90% {
transform: translateX(20%);
}
100% {
transform: translateX(30%);
}
}
/* Simple Title Animation */
@keyframes draw {
0% {
width: 0%;
}
100% {
width: 110%;
}
}
@keyframes draw-bottom {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
电影html css页面,纯CSS3构建的电影屏幕效果相关推荐
- css3 卡片亮光_9种纯CSS3人物信息卡片动态展示效果
通常在一些网站的网页上需要展示人物的个人信息,人物信息卡片是其中的一种展示方式,所以这一次给大家带来<9种纯CSS3人物信息卡片动态展示效果>.先上页面截图: 源代码下载: 9种纯CSS3 ...
- 纯CSS3实现的蓝天白云效果
纯CSS3实现的蓝天白云效果 今天我使用了CSS3新增的属性border-radius.linear-gradient.scale(缩放)和一些布局技巧实现了蓝天白云的效果.其HTML结构如下: &l ...
- css3之 谜灯卡片_9种纯CSS3人物信息卡片UI设计效果
插件描述:每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成 非常漂亮的鼠标滑过动画特效. 这是一组纯CSS3人物信息卡片UI设计效果.这组人物信息卡片共9种效果,每种效果在鼠标滑过卡 ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。...
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- html适合app的登陆页面,纯CSS3创意手机APP登录界面动画特效
这是一款使用纯CSS3制作的效果非常有创意的手机APP登录界面动画特效.该特效在用户点击登录按钮之后,按钮变形为一个小球图标,并且小球会上下弹跳,之后小球会落入界面底部成为一个图标按钮. 使用方法 H ...
- 图片展示html css代码,纯CSS3实现图片展示特效
Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成.本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可 ...
- css520.520,30个纯css3动画代码片段和效果演示合集
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
- 纯CSS3实现常见多种相册效果
本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...
- css33d图片轮播_手把手教你用纯css3实现轮播图效果
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
最新文章
- 精华 | 超详细AI芯片产业链梳理
- Transformer: Training and fine-tuning(六)
- Jenkins持续集成环境之插件管理和角色管理
- python对话框代码_Python、tkinter、复杂对话框和代码结构
- 劳心者、劳力者或CEO、CTO各得其所，足矣
- Pytorch中model.eval()的作用分析
- 爬虫3 requests基础之 乱码编码问题
- 阿里巴巴的AI都能做英文阅读理解了 你还不赶快多背几个单词？
- c++ 开方_20款丨空调控制系统的三种打开方式
- JavaScript代码如何在VScode进行调试？
- Vue学习笔记(一) 基础+指令+侦听器+计算属性+vue-cli
- android 清理后自动重启,解决Android后台清理APP后，程序自动重启的问题
- 快解析助力餐饮业实时访问后台管理系统
- @keyframes简单使用
- C语言实现Dijkstra算法（求解两点之间最短路径问题）
- cad尺寸标注快捷键_为什么CAD布局里标注相同距离尺寸不一样？
- 释放数据价值，华为云大数据BI解决方案“有几手”
- Docker的实现原理以及与容器的区别
- 爱因斯坦的难题和解答
- 离散制造业生产域制造资源数据标准化及治理建设思路