<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Animated Bootstarp Form Headings Style 1/3</h2>
</div>
<svg viewBox="0 0 600 300">
<!-- Symbol with text -->
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line">
Bootsnipp
</text>
</symbol>
<!-- Clippath with text -->
<clippath id="cp-text">
<text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line">
Bootsnipp
</text>
</clippath>
<!-- Group for shadow -->
<g clip-path="url(#cp-text)" class="shadow">
<rect width="100%" height="100%" class="anim-shape anim-shape--shadow"></rect>
</g>
<!-- Group with clippath for text-->
<g clip-path="url(#cp-text)" class="colortext">
<!-- Animated shapes inside text -->
<rect width="100%" height="100%" class="anim-shape"></rect>
<rect width="80%" height="100%" class="anim-shape"></rect>
<rect width="60%" height="100%" class="anim-shape"></rect>
<rect width="40%" height="100%" class="anim-shape"></rect>
<rect width="20%" height="100%" class="anim-shape"></rect>
</g>
<!-- Transparent copy of text to keep patterned text selectable -->
<use xlink:href="#s-text" class="text--transparent"></use>
</svg>
<div class="row">
<h2>Animated Bootstarp Form Headings Style 2/3</h2>
</div>
<div class="bs-example bs-example-type" data-example-id="simple-headings">
<table class="table">
<tbody>
<tr>
<td>
<h1>
<div class="box-with-text-stripped">h1. Bootstrap heading</div>
</h1>
</td>
<td class="type-info">Semibold 36px</td>
</tr>
<tr>
<td>
<h2>
<div class="box-with-text-stripped">h2. Bootstrap heading</div>
</h2>
</td>
<td class="type-info">Semibold 30px</td>
</tr>
<tr>
<td>
<h3>
<div class="box-with-text-stripped">h3. Bootstrap heading</div>
</h3>
</td>
<td class="type-info">Semibold 24px</td>
</tr>
<tr>
<td>
<h4>
<div class="box-with-text-stripped">h4. Bootstrap heading</div>
</h4>
</td>
<td class="type-info">Semibold 18px</td>
</tr>
<tr>
<td>
<h5>
<div class="box-with-text-stripped">h5. Bootstrap heading</div>
</h5>
</td>
<td class="type-info">Semibold 14px</td>
</tr>
<tr>
<td>
<h6>
<div class="box-with-text-stripped">h6. Bootstrap heading</div>
</h6>
</td>
<td class="type-info">Semibold 12px</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<h2>Animated Bootstarp Form Headings Style 3/3</h2>
</div>
<div class="bs-example bs-example-type" data-example-id="simple-headings">
<table class="table">
<tbody>
<tr>
<td>
<h1>
<div class="box-with-text">
<div class="text">h1. Bootstrap heading</div>
</div>
</h1>
</td>
<td class="type-info">Semibold 36px</td>
</tr>
<tr>
<td>
<h2>
<div class="box-with-text">
<div class="text">h2. Bootstrap heading</div>
</div>
</h2>
</td>
<td class="type-info">Semibold 30px</td>
</tr>
<tr>
<td>
<h3>
<div class="box-with-text">
<div class="text">h3. Bootstrap heading</div>
</div>
</h3>
</td>
<td class="type-info">Semibold 24px</td>
</tr>
<tr>
<td>
<h4>
<div class="box-with-text">
<div class="text">h4. Bootstrap heading</div>
</div>
</h4>
</td>
<td class="type-info">Semibold 18px</td>
</tr>
<tr>
<td>
<h5>
<div class="box-with-text">
<div class="text">h5. Bootstrap heading</div>
</div>
</h5>
</td>
<td class="type-info">Semibold 14px</td>
</tr>
<tr>
<td>
<h6>
<div class="box-with-text">
<div class="text">h6. Bootstrap heading</div>
</div>
</h6>
</td>
<td class="type-info">Semibold 12px</td>
</tr>
</tbody>
</table>
</div>
</div>
body {
background: black;
color: #fff; }
/*1/6*/
/* Main stuff */
.text--transparent {
fill: transparent; }
.anim-shape {
-webkit-transform-origin: 0x 150px;
transform-origin: 0x 150px;
-webkit-transform: scale(0, 1) translate(0, 0);
transform: scale(0, 1) translate(0, 0);
-webkit-animation: moving-panel 3s infinite alternate;
animation: moving-panel 3s infinite alternate; }
.colortext .anim-shape:nth-child(1) {
fill: #0e1826; }
.colortext .anim-shape:nth-child(2) {
fill: #166973; }
.colortext .anim-shape:nth-child(3) {
fill: #65bfa6; }
.colortext .anim-shape:nth-child(4) {
fill: #f2cd5c; }
.colortext .anim-shape:nth-child(5) {
fill: #f26444; }
.shadow {
-webkit-transform: translate(10px, 10px);
transform: translate(10px, 10px); }
.anim-shape--shadow {
fill: #000;
fill-opacity: 0.2; }
@-webkit-keyframes moving-panel {
100% {
-webkit-transform: scale(1, 1) translate(20px, 0);
transform: scale(1, 1) translate(20px, 0); } }
@keyframes moving-panel {
100% {
-webkit-transform: scale(1, 1) translate(20px, 0);
transform: scale(1, 1) translate(20px, 0); } }
/* Other stuff */
svg {
width: 50%;
display: block;
text-transform: uppercase; font: 500 8.5em/1 'Open Sans', Impact; }
/*1/6*/
/*2/6*/
.box-with-text-stripped {
background-image: -webkit-linear-gradient(crimson 50%, white 50%);
background-position: 0 0;
-webkit-background-clip: text;
background-size: 100% 15px;
background-repeat: repeat;
-webkit-animation: stripes 3s linear infinite;
animation: stripes 3s linear infinite;
-webkit-text-fill-color: transparent; }
.box-with-text-stripped {
overflow: hidden;
text-transform: uppercase;
white-space: nowrap;
}
@-webkit-keyframes stripes {
100% {
background-position: 0 -50px; } }
@keyframes stripes {
100% {
background-position: 0 -50px; } }
/*3/6*/
/* Main stuff */
.box-with-text {
position: relative;
overflow: hidden;
text-transform: uppercase;
font-size: ;
}
.box-with-text:before {
content: '';
display: block;
position: absolute;
border-radius: 50%;
box-shadow: 0vmax 0vmax 10vmax 10vmax purple, 15vmax 0vmax 10vmax 10vmax violet, 30vmax 0vmax 10vmax 10vmax teal, 45vmax 0vmax 10vmax 10vmax orangered, 60vmax 0vmax 10vmax 10vmax yellow, 75vmax 0vmax 10vmax 10vmax crimson, 90vmax 0vmax 10vmax 10vmax yellowgreen, 105vmax 0vmax 10vmax 10vmax orange, 120vmax 0vmax 10vmax 10vmax darkturquoise, 135vmax 0vmax 10vmax 10vmax pink, 0vmax 15vmax 10vmax 10vmax steelblue, 15vmax 15vmax 10vmax 10vmax turquoise, 30vmax 15vmax 10vmax 10vmax coral, 45vmax 15vmax 10vmax 10vmax skyblue, 60vmax 15vmax 10vmax 10vmax darkviolet, 75vmax 15vmax 10vmax 10vmax gold, 90vmax 15vmax 10vmax 10vmax purple, 105vmax 15vmax 10vmax 10vmax violet, 120vmax 15vmax 10vmax 10vmax teal, 135vmax 15vmax 10vmax 10vmax orangered, 0vmax 30vmax 10vmax 10vmax yellow, 15vmax 30vmax 10vmax 10vmax crimson, 30vmax 30vmax 10vmax 10vmax yellowgreen, 45vmax 30vmax 10vmax 10vmax orange, 60vmax 30vmax 10vmax 10vmax darkturquoise, 75vmax 30vmax 10vmax 10vmax pink, 90vmax 30vmax 10vmax 10vmax steelblue, 105vmax 30vmax 10vmax 10vmax turquoise, 120vmax 30vmax 10vmax 10vmax coral, 135vmax 30vmax 10vmax 10vmax skyblue, 0vmax 45vmax 10vmax 10vmax darkviolet, 15vmax 45vmax 10vmax 10vmax gold, 30vmax 45vmax 10vmax 10vmax darkslateblue, 45vmax 45vmax 10vmax 10vmax purple, 60vmax 45vmax 10vmax 10vmax violet, 75vmax 45vmax 10vmax 10vmax teal, 90vmax 45vmax 10vmax 10vmax orangered, 105vmax 45vmax 10vmax 10vmax yellow, 120vmax 45vmax 10vmax 10vmax crimson, 135vmax 45vmax 10vmax 10vmax yellowgreen, 0vmax 60vmax 10vmax 10vmax orange, 15vmax 60vmax 10vmax 10vmax darkturquoise, 30vmax 60vmax 10vmax 10vmax pink, 45vmax 60vmax 10vmax 10vmax steelblue, 60vmax 60vmax 10vmax 10vmax turquoise, 75vmax 60vmax 10vmax 10vmax coral, 90vmax 60vmax 10vmax 10vmax skyblue, 105vmax 60vmax 10vmax 10vmax darkviolet, 120vmax 60vmax 10vmax 10vmax gold, 135vmax 60vmax 10vmax 10vmax darkslateblue;
-webkit-animation: shadows-cells 2.5s linear infinite;
animation: shadows-cells 2.5s linear infinite; }
.box-with-text:after {
content: '';
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
display: block;
border: 4px solid black; }
.text {
position: relative;
display: block;
background: black;
color: white;
mix-blend-mode: darken; }
@-webkit-keyframes shadows-cells {
25% {
box-shadow: 0vmax 0vmax 10vmax 10vmax coral, 15vmax 0vmax 10vmax 10vmax skyblue, 30vmax 0vmax 10vmax 10vmax darkviolet, 45vmax 0vmax 10vmax 10vmax gold, 60vmax 0vmax 10vmax 10vmax purple, 75vmax 0vmax 10vmax 10vmax violet, 90vmax 0vmax 10vmax 10vmax teal, 105vmax 0vmax 10vmax 10vmax orangered, 120vmax 0vmax 10vmax 10vmax yellow, 135vmax 0vmax 10vmax 10vmax crimson, 0vmax 15vmax 10vmax 10vmax yellowgreen, 15vmax 15vmax 10vmax 10vmax orange, 30vmax 15vmax 10vmax 10vmax darkturquoise, 45vmax 15vmax 10vmax 10vmax pink, 60vmax 15vmax 10vmax 10vmax steelblue, 75vmax 15vmax 10vmax 10vmax turquoise, 90vmax 15vmax 10vmax 10vmax coral, 105vmax 15vmax 10vmax 10vmax skyblue, 120vmax 15vmax 10vmax 10vmax darkviolet, 135vmax 15vmax 10vmax 10vmax gold, 0vmax 30vmax 10vmax 10vmax darkslateblue, 15vmax 30vmax 10vmax 10vmax purple, 30vmax 30vmax 10vmax 10vmax violet, 45vmax 30vmax 10vmax 10vmax teal, 60vmax 30vmax 10vmax 10vmax orangered, 75vmax 30vmax 10vmax 10vmax yellow, 90vmax 30vmax 10vmax 10vmax crimson, 105vmax 30vmax 10vmax 10vmax yellowgreen, 120vmax 30vmax 10vmax 10vmax orange, 135vmax 30vmax 10vmax 10vmax darkturquoise, 0vmax 45vmax 10vmax 10vmax pink, 15vmax 45vmax 10vmax 10vmax steelblue, 30vmax 45vmax 10vmax 10vmax turquoise, 45vmax 45vmax 10vmax 10vmax coral, 60vmax 45vmax 10vmax 10vmax skyblue, 75vmax 45vmax 10vmax 10vmax darkviolet, 90vmax 45vmax 10vmax 10vmax gold, 105vmax 45vmax 10vmax 10vmax darkslateblue, 120vmax 45vmax 10vmax 10vmax purple, 135vmax 45vmax 10vmax 10vmax violet, 0vmax 60vmax 10vmax 10vmax teal, 15vmax 60vmax 10vmax 10vmax orangered, 30vmax 60vmax 10vmax 10vmax yellow, 45vmax 60vmax 10vmax 10vmax crimson, 60vmax 60vmax 10vmax 10vmax yellowgreen, 75vmax 60vmax 10vmax 10vmax orange, 90vmax 60vmax 10vmax 10vmax darkturquoise, 105vmax 60vmax 10vmax 10vmax pink, 120vmax 60vmax 10vmax 10vmax steelblue, 135vmax 60vmax 10vmax 10vmax turquoise; }
45% {
box-shadow: 0vmax 0vmax 10vmax 10vmax yellowgreen, 15vmax 0vmax 10vmax 10vmax orange, 30vmax 0vmax 10vmax 10vmax darkturquoise, 45vmax 0vmax 10vmax 10vmax pink, 60vmax 0vmax 10vmax 10vmax steelblue, 75vmax 0vmax 10vmax 10vmax turquoise, 90vmax 0vmax 10vmax 10vmax coral, 105vmax 0vmax 10vmax 10vmax skyblue, 120vmax 0vmax 10vmax 10vmax darkviolet, 135vmax 0vmax 10vmax 10vmax gold, 0vmax 15vmax 10vmax 10vmax purple, 15vmax 15vmax 10vmax 10vmax violet, 30vmax 15vmax 10vmax 10vmax teal, 45vmax 15vmax 10vmax 10vmax orangered, 60vmax 15vmax 10vmax 10vmax yellow, 75vmax 15vmax 10vmax 10vmax crimson, 90vmax 15vmax 10vmax 10vmax yellowgreen, 105vmax 15vmax 10vmax 10vmax orange, 120vmax 15vmax 10vmax 10vmax darkturquoise, 135vmax 15vmax 10vmax 10vmax pink, 0vmax 30vmax 10vmax 10vmax steelblue, 15vmax 30vmax 10vmax 10vmax turquoise, 30vmax 30vmax 10vmax 10vmax coral, 45vmax 30vmax 10vmax 10vmax skyblue, 60vmax 30vmax 10vmax 10vmax darkviolet, 75vmax 30vmax 10vmax 10vmax gold, 90vmax 30vmax 10vmax 10vmax darkslateblue, 105vmax 30vmax 10vmax 10vmax purple, 120vmax 30vmax 10vmax 10vmax violet, 135vmax 30vmax 10vmax 10vmax teal, 0vmax 45vmax 10vmax 10vmax orangered, 15vmax 45vmax 10vmax 10vmax yellow, 30vmax 45vmax 10vmax 10vmax crimson, 45vmax 45vmax 10vmax 10vmax yellowgreen, 60vmax 45vmax 10vmax 10vmax orange, 75vmax 45vmax 10vmax 10vmax darkturquoise, 90vmax 45vmax 10vmax 10vmax pink, 105vmax 45vmax 10vmax 10vmax steelblue, 120vmax 45vmax 10vmax 10vmax turquoise, 135vmax 45vmax 10vmax 10vmax coral, 0vmax 60vmax 10vmax 10vmax skyblue, 15vmax 60vmax 10vmax 10vmax darkviolet, 30vmax 60vmax 10vmax 10vmax gold, 45vmax 60vmax 10vmax 10vmax darkslateblue, 60vmax 60vmax 10vmax 10vmax purple, 75vmax 60vmax 10vmax 10vmax violet, 90vmax 60vmax 10vmax 10vmax teal, 105vmax 60vmax 10vmax 10vmax orangered, 120vmax 60vmax 10vmax 10vmax yellow, 135vmax 60vmax 10vmax 10vmax crimson; }
75% {
box-shadow: 0vmax 0vmax 10vmax 10vmax teal, 15vmax 0vmax 10vmax 10vmax orangered, 30vmax 0vmax 10vmax 10vmax yellow, 45vmax 0vmax 10vmax 10vmax crimson, 60vmax 0vmax 10vmax 10vmax yellowgreen, 75vmax 0vmax 10vmax 10vmax orange, 90vmax 0vmax 10vmax 10vmax darkturquoise, 105vmax 0vmax 10vmax 10vmax pink, 120vmax 0vmax 10vmax 10vmax steelblue, 135vmax 0vmax 10vmax 10vmax turquoise, 0vmax 15vmax 10vmax 10vmax coral, 15vmax 15vmax 10vmax 10vmax skyblue, 30vmax 15vmax 10vmax 10vmax darkviolet, 45vmax 15vmax 10vmax 10vmax gold, 60vmax 15vmax 10vmax 10vmax darkslateblue, 75vmax 15vmax 10vmax 10vmax purple, 90vmax 15vmax 10vmax 10vmax violet, 105vmax 15vmax 10vmax 10vmax teal, 120vmax 15vmax 10vmax 10vmax orangered, 135vmax 15vmax 10vmax 10vmax yellow, 0vmax 30vmax 10vmax 10vmax crimson, 15vmax 30vmax 10vmax 10vmax yellowgreen, 30vmax 30vmax 10vmax 10vmax orange, 45vmax 30vmax 10vmax 10vmax darkturquoise, 60vmax 30vmax 10vmax 10vmax pink, 75vmax 30vmax 10vmax 10vmax steelblue, 90vmax 30vmax 10vmax 10vmax turquoise, 105vmax 30vmax 10vmax 10vmax coral, 120vmax 30vmax 10vmax 10vmax skyblue, 135vmax 30vmax 10vmax 10vmax darkviolet, 0vmax 45vmax 10vmax 10vmax gold, 15vmax 45vmax 10vmax 10vmax darkslateblue, 30vmax 45vmax 10vmax 10vmax purple, 45vmax 45vmax 10vmax 10vmax violet, 60vmax 45vmax 10vmax 10vmax teal, 75vmax 45vmax 10vmax 10vmax orangered, 90vmax 45vmax 10vmax 10vmax yellow, 105vmax 45vmax 10vmax 10vmax crimson, 120vmax 45vmax 10vmax 10vmax yellowgreen, 135vmax 45vmax 10vmax 10vmax orange, 0vmax 60vmax 10vmax 10vmax darkturquoise, 15vmax 60vmax 10vmax 10vmax pink, 30vmax 60vmax 10vmax 10vmax steelblue, 45vmax 60vmax 10vmax 10vmax turquoise, 60vmax 60vmax 10vmax 10vmax coral, 75vmax 60vmax 10vmax 10vmax skyblue, 90vmax 60vmax 10vmax 10vmax darkviolet, 105vmax 60vmax 10vmax 10vmax gold, 120vmax 60vmax 10vmax 10vmax darkslateblue, 135vmax 60vmax 10vmax 10vmax purple; } }
@keyframes shadows-cells {
25% {
box-shadow: 0vmax 0vmax 10vmax 10vmax coral, 15vmax 0vmax 10vmax 10vmax skyblue, 30vmax 0vmax 10vmax 10vmax darkviolet, 45vmax 0vmax 10vmax 10vmax gold, 60vmax 0vmax 10vmax 10vmax purple, 75vmax 0vmax 10vmax 10vmax violet, 90vmax 0vmax 10vmax 10vmax teal, 105vmax 0vmax 10vmax 10vmax orangered, 120vmax 0vmax 10vmax 10vmax yellow, 135vmax 0vmax 10vmax 10vmax crimson, 0vmax 15vmax 10vmax 10vmax yellowgreen, 15vmax 15vmax 10vmax 10vmax orange, 30vmax 15vmax 10vmax 10vmax darkturquoise, 45vmax 15vmax 10vmax 10vmax pink, 60vmax 15vmax 10vmax 10vmax steelblue, 75vmax 15vmax 10vmax 10vmax turquoise, 90vmax 15vmax 10vmax 10vmax coral, 105vmax 15vmax 10vmax 10vmax skyblue, 120vmax 15vmax 10vmax 10vmax darkviolet, 135vmax 15vmax 10vmax 10vmax gold, 0vmax 30vmax 10vmax 10vmax darkslateblue, 15vmax 30vmax 10vmax 10vmax purple, 30vmax 30vmax 10vmax 10vmax violet, 45vmax 30vmax 10vmax 10vmax teal, 60vmax 30vmax 10vmax 10vmax orangered, 75vmax 30vmax 10vmax 10vmax yellow, 90vmax 30vmax 10vmax 10vmax crimson, 105vmax 30vmax 10vmax 10vmax yellowgreen, 120vmax 30vmax 10vmax 10vmax orange, 135vmax 30vmax 10vmax 10vmax darkturquoise, 0vmax 45vmax 10vmax 10vmax pink, 15vmax 45vmax 10vmax 10vmax steelblue, 30vmax 45vmax 10vmax 10vmax turquoise, 45vmax 45vmax 10vmax 10vmax coral, 60vmax 45vmax 10vmax 10vmax skyblue, 75vmax 45vmax 10vmax 10vmax darkviolet, 90vmax 45vmax 10vmax 10vmax gold, 105vmax 45vmax 10vmax 10vmax darkslateblue, 120vmax 45vmax 10vmax 10vmax purple, 135vmax 45vmax 10vmax 10vmax violet, 0vmax 60vmax 10vmax 10vmax teal, 15vmax 60vmax 10vmax 10vmax orangered, 30vmax 60vmax 10vmax 10vmax yellow, 45vmax 60vmax 10vmax 10vmax crimson, 60vmax 60vmax 10vmax 10vmax yellowgreen, 75vmax 60vmax 10vmax 10vmax orange, 90vmax 60vmax 10vmax 10vmax darkturquoise, 105vmax 60vmax 10vmax 10vmax pink, 120vmax 60vmax 10vmax 10vmax steelblue, 135vmax 60vmax 10vmax 10vmax turquoise; }
45% {
box-shadow: 0vmax 0vmax 10vmax 10vmax yellowgreen, 15vmax 0vmax 10vmax 10vmax orange, 30vmax 0vmax 10vmax 10vmax darkturquoise, 45vmax 0vmax 10vmax 10vmax pink, 60vmax 0vmax 10vmax 10vmax steelblue, 75vmax 0vmax 10vmax 10vmax turquoise, 90vmax 0vmax 10vmax 10vmax coral, 105vmax 0vmax 10vmax 10vmax skyblue, 120vmax 0vmax 10vmax 10vmax darkviolet, 135vmax 0vmax 10vmax 10vmax gold, 0vmax 15vmax 10vmax 10vmax purple, 15vmax 15vmax 10vmax 10vmax violet, 30vmax 15vmax 10vmax 10vmax teal, 45vmax 15vmax 10vmax 10vmax orangered, 60vmax 15vmax 10vmax 10vmax yellow, 75vmax 15vmax 10vmax 10vmax crimson, 90vmax 15vmax 10vmax 10vmax yellowgreen, 105vmax 15vmax 10vmax 10vmax orange, 120vmax 15vmax 10vmax 10vmax darkturquoise, 135vmax 15vmax 10vmax 10vmax pink, 0vmax 30vmax 10vmax 10vmax steelblue, 15vmax 30vmax 10vmax 10vmax turquoise, 30vmax 30vmax 10vmax 10vmax coral, 45vmax 30vmax 10vmax 10vmax skyblue, 60vmax 30vmax 10vmax 10vmax darkviolet, 75vmax 30vmax 10vmax 10vmax gold, 90vmax 30vmax 10vmax 10vmax darkslateblue, 105vmax 30vmax 10vmax 10vmax purple, 120vmax 30vmax 10vmax 10vmax violet, 135vmax 30vmax 10vmax 10vmax teal, 0vmax 45vmax 10vmax 10vmax orangered, 15vmax 45vmax 10vmax 10vmax yellow, 30vmax 45vmax 10vmax 10vmax crimson, 45vmax 45vmax 10vmax 10vmax yellowgreen, 60vmax 45vmax 10vmax 10vmax orange, 75vmax 45vmax 10vmax 10vmax darkturquoise, 90vmax 45vmax 10vmax 10vmax pink, 105vmax 45vmax 10vmax 10vmax steelblue, 120vmax 45vmax 10vmax 10vmax turquoise, 135vmax 45vmax 10vmax 10vmax coral, 0vmax 60vmax 10vmax 10vmax skyblue, 15vmax 60vmax 10vmax 10vmax darkviolet, 30vmax 60vmax 10vmax 10vmax gold, 45vmax 60vmax 10vmax 10vmax darkslateblue, 60vmax 60vmax 10vmax 10vmax purple, 75vmax 60vmax 10vmax 10vmax violet, 90vmax 60vmax 10vmax 10vmax teal, 105vmax 60vmax 10vmax 10vmax orangered, 120vmax 60vmax 10vmax 10vmax yellow, 135vmax 60vmax 10vmax 10vmax crimson; }
75% {
box-shadow: 0vmax 0vmax 10vmax 10vmax teal, 15vmax 0vmax 10vmax 10vmax orangered, 30vmax 0vmax 10vmax 10vmax yellow, 45vmax 0vmax 10vmax 10vmax crimson, 60vmax 0vmax 10vmax 10vmax yellowgreen, 75vmax 0vmax 10vmax 10vmax orange, 90vmax 0vmax 10vmax 10vmax darkturquoise, 105vmax 0vmax 10vmax 10vmax pink, 120vmax 0vmax 10vmax 10vmax steelblue, 135vmax 0vmax 10vmax 10vmax turquoise, 0vmax 15vmax 10vmax 10vmax coral, 15vmax 15vmax 10vmax 10vmax skyblue, 30vmax 15vmax 10vmax 10vmax darkviolet, 45vmax 15vmax 10vmax 10vmax gold, 60vmax 15vmax 10vmax 10vmax darkslateblue, 75vmax 15vmax 10vmax 10vmax purple, 90vmax 15vmax 10vmax 10vmax violet, 105vmax 15vmax 10vmax 10vmax teal, 120vmax 15vmax 10vmax 10vmax orangered, 135vmax 15vmax 10vmax 10vmax yellow, 0vmax 30vmax 10vmax 10vmax crimson, 15vmax 30vmax 10vmax 10vmax yellowgreen, 30vmax 30vmax 10vmax 10vmax orange, 45vmax 30vmax 10vmax 10vmax darkturquoise, 60vmax 30vmax 10vmax 10vmax pink, 75vmax 30vmax 10vmax 10vmax steelblue, 90vmax 30vmax 10vmax 10vmax turquoise, 105vmax 30vmax 10vmax 10vmax coral, 120vmax 30vmax 10vmax 10vmax skyblue, 135vmax 30vmax 10vmax 10vmax darkviolet, 0vmax 45vmax 10vmax 10vmax gold, 15vmax 45vmax 10vmax 10vmax darkslateblue, 30vmax 45vmax 10vmax 10vmax purple, 45vmax 45vmax 10vmax 10vmax violet, 60vmax 45vmax 10vmax 10vmax teal, 75vmax 45vmax 10vmax 10vmax orangered, 90vmax 45vmax 10vmax 10vmax yellow, 105vmax 45vmax 10vmax 10vmax crimson, 120vmax 45vmax 10vmax 10vmax yellowgreen, 135vmax 45vmax 10vmax 10vmax orange, 0vmax 60vmax 10vmax 10vmax darkturquoise, 15vmax 60vmax 10vmax 10vmax pink, 30vmax 60vmax 10vmax 10vmax steelblue, 45vmax 60vmax 10vmax 10vmax turquoise, 60vmax 60vmax 10vmax 10vmax coral, 75vmax 60vmax 10vmax 10vmax skyblue, 90vmax 60vmax 10vmax 10vmax darkviolet, 105vmax 60vmax 10vmax 10vmax gold, 120vmax 60vmax 10vmax 10vmax darkslateblue, 135vmax 60vmax 10vmax 10vmax purple; } }
