HTML
3
1
<div class="container">2
<p>We find beauty not in the thing itself but in the patterns of shadows, the light and the darkness, that one thing against another creates… Were it not for shadows, there would be no beauty.</p>3
</div>CSS
57
1
body {2
background-color: #F5F5F5;3
font-size: 1.1em;4
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;5
}6
7
.container {8
margin: 10px auto;9
max-width: 900px;10
background-color: white;11
position: relative;12
padding: 0.5em 1.5em;13
text-align: center;14
}15
16
p {17
position: relative;18
z-index: 2;19
}20
21
.container::before,22
.container::after {23
content: "";24
position: absolute;25
height: 100%;26
width: 50%;27
right: 50%;28
transform-origin: 0 50%;29
top: 0;30
animation: 5s move infinite;31
}32
33
.container::before {34
z-index: 1;35
background-color: darkslategrey;36
filter: invert(1);37
}38
39
.container::after {40
backdrop-filter: invert(1);41
backdrop-filter: invert(1);42
z-index: 3;43
}44
45
@keyframes move {46
0% {47
transform: scaleX(0);48
}49
50
50% {51
transform: scaleX(2);52
}53
54
100% {55
transform: scaleX(0);56
}57
}JS
1
1