51 lines
1.3 KiB
HTML
Executable File
51 lines
1.3 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
background-color: #4e4851;
|
|
}
|
|
.header-container {
|
|
min-width: 1300px;
|
|
min-height: 866px;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
.header-img {
|
|
position: absolute;
|
|
min-width: 1300px;
|
|
min-height: 866px;
|
|
background: url('./image.jpg') no-repeat;
|
|
}
|
|
.header-img:nth-child(2) {
|
|
transform: translate3d(10px,0,0);
|
|
animation: sideshift 1s infinite linear;
|
|
background-blend-mode: screen;
|
|
}
|
|
@keyframes sideshift {
|
|
0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
|
|
5% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
|
|
10% { clip-path: polygon(0 8%, 100% 8%, 100% 10%, 0 10%); }
|
|
30% { clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%); }
|
|
35% { clip-path: polygon(0 35%, 100% 37%, 100% 35%, 0 37%); }
|
|
40% { clip-path: polygon(0 50%, 100% 55%, 100% 50%, 0 55%); }
|
|
|
|
50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
|
|
100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
|
|
}
|
|
.header-img:nth-child(3) {
|
|
opacity: 1;
|
|
transform: skew(10deg, 10deg);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header-container">
|
|
<div class="header-img"></div>
|
|
<div class="header-img"></div>
|
|
<div class="header-img"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|