电影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;

}

}