Persistent Light Source Transform
This code demo was published on .
Sorry, this code snippet failed to load, but you can still check it out over on CodePen!
<div class="square">A</div>html, body {
height: 100%;
position: relative;
}
body {
background: #2EA05B;
}
.square {
background: #48B97C;
color: mintcream;
width: 2.5em;
height: 2.5em;
margin: -1.25em 0 0 -1.25em;
display: block;
position: absolute;
top: 50%;
left: 50%;
font-size: 6em;
line-height: 2.5em;
text-align: center;
text-shadow: 1px 1px #2ea05B, 2px 2px #2ea05B, 3px 3px #2ea05B, 4px 4px #2ea05B, 5px 5px #2ea05B, 6px 6px #2ea05B, 7px 7px #2ea05B, 8px 8px #2ea05B, 9px 9px #2ea05B, 10px 10px #2ea05B, 11px 11px #2ea05B, 12px 12px #2ea05B;
box-shadow: 0.5em 0.5em 0 rgba(0, 0, 0, 0.2);
animation: wiggle 8s infinite linear;
}
@keyframes wiggle {
0% {
box-shadow: 0.5em 0.5em 0 rgba(0, 0, 0, 0.2);
transform: none;
}
25% {
left: 20%;
text-shadow: 1px -1px #2ea05B,
2px -2px #2ea05B,
3px -3px #2ea05B,
4px -4px #2ea05B,
5px -5px #2ea05B,
6px -6px #2ea05B,
7px -7px #2ea05B,
8px -8px #2ea05B,
9px -9px #2ea05B,
10px -10px #2ea05B,
11px -11px #2ea05B,
12px -12px #2ea05B;
box-shadow: 0.5em -0.5em 0 rgba(0, 0, 0, 0.2);
transform: rotate3d(0, 0, 1, 90deg);
}
50% {
text-shadow: -1px -1px #2ea05B,
-2px -2px #2ea05B,
-3px -3px #2ea05B,
-4px -4px #2ea05B,
-5px -5px #2ea05B,
-6px -6px #2ea05B,
-7px -7px #2ea05B,
-8px -8px #2ea05B,
-9px -9px #2ea05B,
-10px -10px #2ea05B,
-11px -11px #2ea05B,
-12px -12px #2ea05B;
box-shadow: -0.5em -0.5em 0 rgba(0, 0, 0, 0.2);
transform: rotate3d(0, 0, 1, 180deg);
}
75% {
left: 75%;
text-shadow: -1px 1px #2ea05B,
-2px 2px #2ea05B,
-3px 3px #2ea05B,
-4px 4px #2ea05B,
-5px 5px #2ea05B,
-6px 6px #2ea05B,
-7px 7px #2ea05B,
-8px 8px #2ea05B,
-9px 9px #2ea05B,
-10px 10px #2ea05B,
-11px 11px #2ea05B,
-12px 12px #2ea05B;
box-shadow: -0.5em 0.5em 0 rgba(0, 0, 0, 0.2);
transform: rotate3d(0, 0, 1, 270deg);
}
100% {
text-shadow: 1px 1px #2ea05B,
2px 2px #2ea05B,
3px 3px #2ea05B,
4px 4px #2ea05B,
5px 5px #2ea05B,
6px 6px #2ea05B,
7px 7px #2ea05B,
8px 8px #2ea05B,
9px 9px #2ea05B,
10px 10px #2ea05B,
11px 11px #2ea05B,
12px 12px #2ea05B;
box-shadow: 0.5em 0.5em 0 rgba(0, 0, 0, 0.2);
transform: rotate3d(0, 0, 1, 360deg);
}
}