So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
You can download the complete template here
The Following are the css class names I used in the tutorial:
reboot-shadow-animation-3d
reboot-shadow-animation-grow
reboot-shadow-animation-spread
The Following code goes into the HMTL widget:
<style>
.reboot-shadow-animation-3d {
animation: shadow-grow-3d 2.5s ease-in-out infinite;
display: inline-block; /* Ensures proper alignment */
}
@keyframes shadow-grow-3d {
0%, 100% {
text-shadow: 0px 0px 0px black, 0px 0px 0px red;
}
50% {
text-shadow: 1px 1px 0px black, 2px 2px 0px black, 3px 3px 0px black, 4px 4px 1px black, 5px 5px 0px black, 6px 6px 0px black, 7px 7px 0px black;
}
}
.reboot-shadow-animation-grow {
animation: shadow-grow-grow 2.6s ease-in-out infinite;
display: inline-block; /* Ensures proper alignment */
}
@keyframes shadow-grow-grow {
0%, 100% {
text-shadow: 0px 0px 0px black;
}
50% {
text-shadow: 0px 3px 8px black;
}
}
.reboot-shadow-animation-spread{
animation: shadow-grow-spread 2.7s ease-in-out infinite;
display: inline-block; /* Ensures proper alignment */
}
@keyframes shadow-grow-spread {
0%, 100% {
text-shadow: 0px 0px 0px black;
}
50% {
text-shadow: 0px 0px 7px black;
}
}
</style>