136 lines
4.7 KiB
CSS
136 lines
4.7 KiB
CSS
@font-face {
|
|
font-family: "repulsor";
|
|
src: url("/assets2/fonts/repulsore.ttf") format("truetype"); }
|
|
@font-face {
|
|
font-family: 'Muli';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local("Muli Regular"), local("Muli-Regular"), url(/assets2/fonts/Muli-Regular.ttf) format("truetype"); }
|
|
html {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
font-family: Muli; }
|
|
|
|
body {
|
|
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e66+0,145266+17,0e0e0e+100 */
|
|
background: #004e66;
|
|
/* Old browsers */
|
|
background: -moz-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%);
|
|
/* FF3.6-15 */
|
|
background: -webkit-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%);
|
|
/* Chrome10-25,Safari5.1-6 */
|
|
background: radial-gradient(ellipse at center, #004e66 0%, #145266 17%, #0e0e0e 100%);
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
|
|
|
|
header {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 800px;
|
|
height: 100px; }
|
|
header h1 {
|
|
text-align: center;
|
|
color: #fff7e5;
|
|
font-family: repulsor;
|
|
font-size: 42px;
|
|
margin-bottom: 0; }
|
|
header h2 {
|
|
margin-top: 0;
|
|
text-align: center;
|
|
color: #ffb400;
|
|
font-size: 30px; }
|
|
|
|
/** glitch **/
|
|
header {
|
|
/* Hover flash animation on last image */ }
|
|
header .glitch {
|
|
position: absolute;
|
|
width: 800px;
|
|
max-width: 400px;
|
|
height: 100px;
|
|
max-height: calc(400px * 1.25);
|
|
overflow: hidden;
|
|
margin: 0 auto; }
|
|
header .glitch:hover {
|
|
cursor: pointer; }
|
|
header .glitch__img {
|
|
position: absolute;
|
|
top: calc(-1 * 5px);
|
|
left: calc(-1 * 10px);
|
|
width: calc(100% + 10px * 2);
|
|
height: calc(100% + 5px * 2);
|
|
background: url(../img/1.jpg) no-repeat 50% 0;
|
|
background-color: transparent;
|
|
background-size: cover;
|
|
background-blend-mode: none; }
|
|
header .glitch__img:nth-child(2) {
|
|
background-color: transparent;
|
|
background-blend-mode: none; }
|
|
header .glitch__img:nth-child(3) {
|
|
background-color: transparent;
|
|
background-blend-mode: none; }
|
|
header .glitch__img:nth-child(4) {
|
|
background-color: transparent;
|
|
background-blend-mode: none; }
|
|
header .glitch__img:nth-child(5) {
|
|
background-color: #af4949;
|
|
background-blend-mode: overlay; }
|
|
header .glitch__img:nth-child(n+2) {
|
|
opacity: 0; }
|
|
header .glitch:hover .glitch__img:nth-child(n+2) {
|
|
opacity: 1; }
|
|
header .glitch:hover .glitch__img:nth-child(2) {
|
|
transform: translate3d(10px, 0, 0);
|
|
animation: glitch-anim-1-horizontal 4s infinite linear alternate; }
|
|
header .glitch:hover > .glitch__img:nth-child(3) {
|
|
transform: translate3d(calc(-1 * 10px), 0, 0);
|
|
animation: glitch-anim-2-horizontal 4s infinite linear alternate; }
|
|
header .glitch:hover > .glitch__img:nth-child(4) {
|
|
transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
|
|
animation: glitch-anim-3-horizontal 4s infinite linear alternate; }
|
|
header .glitch:hover > .glitch__img:nth-child(5) {
|
|
animation: glitch-anim-flash 0.5s steps(1, end) infinite; }
|
|
@keyframes glitch-anim-1-horizontal {
|
|
0% {
|
|
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
|
|
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
|
|
10% {
|
|
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
|
|
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
|
|
20% {
|
|
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
|
|
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
|
|
30% {
|
|
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
|
|
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
|
|
40% {
|
|
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
|
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
|
|
50% {
|
|
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
|
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
|
|
60% {
|
|
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
|
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
|
|
70% {
|
|
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
|
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
|
|
80% {
|
|
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
|
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
|
|
90% {
|
|
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
|
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
|
|
100% {
|
|
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
|
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
|
|
@keyframes glitch-anim-flash {
|
|
0% {
|
|
opacity: 0.2;
|
|
transform: translate3d(10px, 5px, 0); }
|
|
33%, 100% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0); } } }
|
|
|
|
/*# sourceMappingURL=main.css.map */
|