-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathclipping-iframed.html
60 lines (56 loc) · 3.54 KB
/
clipping-iframed.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Clipping Logo - Iframed</title>
<style>
body {
margin: 0;
}
.night-wrapper {
position: relative;
-webkit-clip-path: url(#svgPath);
-moz-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
.night-image {
position: absolute;
top: 0;
left: 0px;
-webkit-animation: moveX 6.8s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95), moveY 5.5s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-animation: moveX 6.8s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95), moveY 5.5s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-animation: moveX 6.8s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95), moveY 5.5s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-animation: moveX 6.8s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95), moveY 5.5s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation: moveX 6.8s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95), moveY 5.5s alternate infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@-webkit-keyframes moveX {
to { left: -300px; }
}
@keyframes moveX {
to { left: -300px; }
}
@-webkit-keyframes moveY {
to { top: -60px; }
}
@keyframes moveY {
to { top: -60px; }
}
</style>
</head>
<body>
<div class="night-wrapper">
<img class="night-image" src="images/night-milky-way.jpg" alt="The Milky Way at night."/>
</div>
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path d="M259.883, 157.044c0.057, 0, 0.146, 0.006, 0.196, 0.006c10.986, 0, 19.886-8.899, 19.886-19.882 c0-10.983-8.899-19.876-19.886-19.876c-0.051, 0-0.14, 0.01-0.196, 0.01h-4.921l-23.438, 39.48L259.883, 157.044z"/>
<polygon points="124.908, 243.267 124.908, 283.021 137.665, 283.021 161.084, 243.267"/>
<polygon points="124.908, 117.293 124.908, 162.517 191.978, 117.293"/>
<path d="M260.079, 243.279h-6.532l-58.923, 39.742h65.455c10.986, 0, 19.886-8.908, 19.886-19.869 C279.965, 252.172, 271.065, 243.279, 260.079, 243.279z"/>
<path d="M385.049, 0H15.047C6.77, 0, 0, 6.773, 0, 15.05v370.002c0, 8.277, 6.77, 15.05, 15.047, 15.05h370.001 c8.277, 0, 15.051-6.772, 15.051-15.05V15.05C400.1, 6.773, 393.326, 0, 385.049, 0z M324.116, 195.683l-49.707, 33.517 c13.235, 5.584, 22.509, 18.693, 22.509, 33.953c0, 20.338-16.49, 36.829-36.839, 36.829h-90.61l-61.565, 41.534 c-0.352, 0.234-0.765, 0.396-1.228, 0.396c-1.161, 0-2.116-0.958-2.116-2.115c0-0.454, 0.133-0.842, 0.362-1.178l22.756-38.67h-17.643 c-1.148-0.012-2.075-0.938-2.075-2.084v-69.43c0-1.178, 0.952-2.113, 2.11-2.113h77.044c1.139, 0.025, 2.034, 0.965, 2.034, 2.113 c0, 0.469-0.165, 0.854-0.403, 1.234l-36.024, 61.168l121.894-82.215H86.857l-0.054, 0.028H63.422c-1.174, 0-2.132-0.938-2.132-2.101 c0-0.779, 0.435-1.453, 1.069-1.83l45.602-30.76v-71.597c0.054-1.126, 0.98-2.015, 2.104-2.015h107.015l46.798-31.547l0.016-0.035 l24.875-16.779v0.009c0.336-0.244, 0.749-0.384, 1.199-0.384c1.164, 0, 2.113, 0.949, 2.113, 2.119c0, 0.432-0.131, 0.834-0.381, 1.19 l-26.909, 45.706c18.115, 2.31, 32.128, 17.792, 32.128, 36.541c0, 20.339-16.49, 36.836-36.839, 36.836c-0.212, 0-0.419-0.006-0.647-0.016 h-37.889v0.016h-15.955v-0.006c-1.177, 0-2.125-0.946-2.125-2.11c0-0.377, 0.111-0.714, 0.26-1.015l40.16-68.158l-131.899, 88.97 h211.152c1.177, 0, 2.116, 0.949, 2.116, 2.116C325.252, 194.623, 324.798, 195.33, 324.116, 195.683z"/>
</clipPath>
</defs>
</svg>
</body>
</html>