Animated pattern made with Css shadow

Animated pattern made with Css shadow

Animation, Css, Download Resources, HTML, Website No Comments on Animated pattern made with Css shadow
Animated pattern made with Css shadow

We can do a lot of things with CSS like build modals, make beautiful text effects, draw a Viking shield, and even create a heart shape. There’s also plenty that we can do with CSS3 Box Shadows, and in this post we are going to look at how some designers play around with CSS shadows to some great results.

In this list you will see CSS shadows used in creating ticking counters, 3D effects on text, pixel art, simple animation. To see more of the same work, do check out the designers’ portfolios.



Demo/Download

HTML

<!-- Created in shadowPainter : ) -->
<div class='box'><span class='dot'></span></div>

CSS

/*-- Created in shadowPainter : ) */
.box {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
width: 119px;
height: 119px;
overflow: hidden;
border: 1px solid #DDD;
}
.dot {
display: block;
position: absolute;
width: 17px;
height: 17px;
top: -17px;
left: -17px;
-webkit-animation: 2s shadows linear infinite;
animation: 2s shadows linear infinite;
box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #FF3D7F, 17px 34px 0 0 #FF9E9D, 17px 51px 0 0 #DAD8A7, 17px 68px 0 0 #7FC7AF, 17px 85px 0 0 #3FB8AF, 17px 102px 0 0 #FF3D7F, 17px 119px 0 0 #FF9E9D, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #3FB8AF, 34px 34px 0 0 #FF3D7F, 34px 51px 0 0 #FF9E9D, 34px 68px 0 0 #DAD8A7, 34px 85px 0 0 #7FC7AF, 34px 102px 0 0 #3FB8AF, 34px 119px 0 0 #FF3D7F, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #7FC7AF, 51px 34px 0 0 #3FB8AF, 51px 51px 0 0 #FF3D7F, 51px 68px 0 0 #FF9E9D, 51px 85px 0 0 #DAD8A7, 51px 102px 0 0 #7FC7AF, 51px 119px 0 0 #3FB8AF, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #DAD8A7, 68px 34px 0 0 #7FC7AF, 68px 51px 0 0 #3FB8AF, 68px 68px 0 0 #FF3D7F, 68px 85px 0 0 #FF9E9D, 68px 102px 0 0 #DAD8A7, 68px 119px 0 0 #7FC7AF, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #FF9E9D, 85px 34px 0 0 #DAD8A7, 85px 51px 0 0 #7FC7AF, 85px 68px 0 0 #3FB8AF, 85px 85px 0 0 #FF3D7F, 85px 102px 0 0 #FF9E9D, 85px 119px 0 0 #DAD8A7, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #FF3D7F, 102px 34px 0 0 #FF9E9D, 102px 51px 0 0 #DAD8A7, 102px 68px 0 0 #7FC7AF, 102px 85px 0 0 #3FB8AF, 102px 102px 0 0 #FF3D7F, 102px 119px 0 0 #FF9E9D, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #3FB8AF, 119px 34px 0 0 #FF3D7F, 119px 51px 0 0 #FF9E9D, 119px 68px 0 0 #DAD8A7, 119px 85px 0 0 #7FC7AF, 119px 102px 0 0 #3FB8AF, 119px 119px 0 0 #FF3D7F;
}

/* Keyframes */

@-webkit-keyframes shadows {
0% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #FF3D7F, 17px 34px 0 0 #FF9E9D, 17px 51px 0 0 #DAD8A7, 17px 68px 0 0 #7FC7AF, 17px 85px 0 0 #3FB8AF, 17px 102px 0 0 #FF3D7F, 17px 119px 0 0 #FF9E9D, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #3FB8AF, 34px 34px 0 0 #FF3D7F, 34px 51px 0 0 #FF9E9D, 34px 68px 0 0 #DAD8A7, 34px 85px 0 0 #7FC7AF, 34px 102px 0 0 #3FB8AF, 34px 119px 0 0 #FF3D7F, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #7FC7AF, 51px 34px 0 0 #3FB8AF, 51px 51px 0 0 #FF3D7F, 51px 68px 0 0 #FF9E9D, 51px 85px 0 0 #DAD8A7, 51px 102px 0 0 #7FC7AF, 51px 119px 0 0 #3FB8AF, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #DAD8A7, 68px 34px 0 0 #7FC7AF, 68px 51px 0 0 #3FB8AF, 68px 68px 0 0 #FF3D7F, 68px 85px 0 0 #FF9E9D, 68px 102px 0 0 #DAD8A7, 68px 119px 0 0 #7FC7AF, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #FF9E9D, 85px 34px 0 0 #DAD8A7, 85px 51px 0 0 #7FC7AF, 85px 68px 0 0 #3FB8AF, 85px 85px 0 0 #FF3D7F, 85px 102px 0 0 #FF9E9D, 85px 119px 0 0 #DAD8A7, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #FF3D7F, 102px 34px 0 0 #FF9E9D, 102px 51px 0 0 #DAD8A7, 102px 68px 0 0 #7FC7AF, 102px 85px 0 0 #3FB8AF, 102px 102px 0 0 #FF3D7F, 102px 119px 0 0 #FF9E9D, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #3FB8AF, 119px 34px 0 0 #FF3D7F, 119px 51px 0 0 #FF9E9D, 119px 68px 0 0 #DAD8A7, 119px 85px 0 0 #7FC7AF, 119px 102px 0 0 #3FB8AF, 119px 119px 0 0 #FF3D7F;}
20% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #3FB8AF, 17px 34px 0 0 #FF3D7F, 17px 51px 0 0 #FF9E9D, 17px 68px 0 0 #DAD8A7, 17px 85px 0 0 #7FC7AF, 17px 102px 0 0 #3FB8AF, 17px 119px 0 0 #FF3D7F, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #7FC7AF, 34px 34px 0 0 #3FB8AF, 34px 51px 0 0 #FF3D7F, 34px 68px 0 0 #FF9E9D, 34px 85px 0 0 #DAD8A7, 34px 102px 0 0 #7FC7AF, 34px 119px 0 0 #3FB8AF, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #DAD8A7, 51px 34px 0 0 #7FC7AF, 51px 51px 0 0 #3FB8AF, 51px 68px 0 0 #FF3D7F, 51px 85px 0 0 #FF9E9D, 51px 102px 0 0 #DAD8A7, 51px 119px 0 0 #7FC7AF, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #FF9E9D, 68px 34px 0 0 #DAD8A7, 68px 51px 0 0 #7FC7AF, 68px 68px 0 0 #3FB8AF, 68px 85px 0 0 #FF3D7F, 68px 102px 0 0 #FF9E9D, 68px 119px 0 0 #DAD8A7, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #FF3D7F, 85px 34px 0 0 #FF9E9D, 85px 51px 0 0 #DAD8A7, 85px 68px 0 0 #7FC7AF, 85px 85px 0 0 #3FB8AF, 85px 102px 0 0 #FF3D7F, 85px 119px 0 0 #FF9E9D, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #3FB8AF, 102px 34px 0 0 #FF3D7F, 102px 51px 0 0 #FF9E9D, 102px 68px 0 0 #DAD8A7, 102px 85px 0 0 #7FC7AF, 102px 102px 0 0 #3FB8AF, 102px 119px 0 0 #FF3D7F, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #7FC7AF, 119px 34px 0 0 #3FB8AF, 119px 51px 0 0 #FF3D7F, 119px 68px 0 0 #FF9E9D, 119px 85px 0 0 #DAD8A7, 119px 102px 0 0 #7FC7AF, 119px 119px 0 0 #3FB8AF;}
40% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #7FC7AF, 17px 34px 0 0 #3FB8AF, 17px 51px 0 0 #FF3D7F, 17px 68px 0 0 #FF9E9D, 17px 85px 0 0 #DAD8A7, 17px 102px 0 0 #7FC7AF, 17px 119px 0 0 #3FB8AF, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #DAD8A7, 34px 34px 0 0 #7FC7AF, 34px 51px 0 0 #3FB8AF, 34px 68px 0 0 #FF3D7F, 34px 85px 0 0 #FF9E9D, 34px 102px 0 0 #DAD8A7, 34px 119px 0 0 #7FC7AF, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #FF9E9D, 51px 34px 0 0 #DAD8A7, 51px 51px 0 0 #7FC7AF, 51px 68px 0 0 #3FB8AF, 51px 85px 0 0 #FF3D7F, 51px 102px 0 0 #FF9E9D, 51px 119px 0 0 #DAD8A7, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #FF3D7F, 68px 34px 0 0 #FF9E9D, 68px 51px 0 0 #DAD8A7, 68px 68px 0 0 #7FC7AF, 68px 85px 0 0 #3FB8AF, 68px 102px 0 0 #FF3D7F, 68px 119px 0 0 #FF9E9D, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #3FB8AF, 85px 34px 0 0 #FF3D7F, 85px 51px 0 0 #FF9E9D, 85px 68px 0 0 #DAD8A7, 85px 85px 0 0 #7FC7AF, 85px 102px 0 0 #3FB8AF, 85px 119px 0 0 #FF3D7F, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #7FC7AF, 102px 34px 0 0 #3FB8AF, 102px 51px 0 0 #FF3D7F, 102px 68px 0 0 #FF9E9D, 102px 85px 0 0 #DAD8A7, 102px 102px 0 0 #7FC7AF, 102px 119px 0 0 #3FB8AF, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #DAD8A7, 119px 34px 0 0 #7FC7AF, 119px 51px 0 0 #3FB8AF, 119px 68px 0 0 #FF3D7F, 119px 85px 0 0 #FF9E9D, 119px 102px 0 0 #DAD8A7, 119px 119px 0 0 #7FC7AF;}
60% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #DAD8A7, 17px 34px 0 0 #7FC7AF, 17px 51px 0 0 #3FB8AF, 17px 68px 0 0 #FF3D7F, 17px 85px 0 0 #FF9E9D, 17px 102px 0 0 #DAD8A7, 17px 119px 0 0 #7FC7AF, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #FF9E9D, 34px 34px 0 0 #DAD8A7, 34px 51px 0 0 #7FC7AF, 34px 68px 0 0 #3FB8AF, 34px 85px 0 0 #FF3D7F, 34px 102px 0 0 #FF9E9D, 34px 119px 0 0 #DAD8A7, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #FF3D7F, 51px 34px 0 0 #FF9E9D, 51px 51px 0 0 #DAD8A7, 51px 68px 0 0 #7FC7AF, 51px 85px 0 0 #3FB8AF, 51px 102px 0 0 #FF3D7F, 51px 119px 0 0 #FF9E9D, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #3FB8AF, 68px 34px 0 0 #FF3D7F, 68px 51px 0 0 #FF9E9D, 68px 68px 0 0 #DAD8A7, 68px 85px 0 0 #7FC7AF, 68px 102px 0 0 #3FB8AF, 68px 119px 0 0 #FF3D7F, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #7FC7AF, 85px 34px 0 0 #3FB8AF, 85px 51px 0 0 #FF3D7F, 85px 68px 0 0 #FF9E9D, 85px 85px 0 0 #DAD8A7, 85px 102px 0 0 #7FC7AF, 85px 119px 0 0 #3FB8AF, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #DAD8A7, 102px 34px 0 0 #7FC7AF, 102px 51px 0 0 #3FB8AF, 102px 68px 0 0 #FF3D7F, 102px 85px 0 0 #FF9E9D, 102px 102px 0 0 #DAD8A7, 102px 119px 0 0 #7FC7AF, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #FF9E9D, 119px 34px 0 0 #DAD8A7, 119px 51px 0 0 #7FC7AF, 119px 68px 0 0 #3FB8AF, 119px 85px 0 0 #FF3D7F, 119px 102px 0 0 #FF9E9D, 119px 119px 0 0 #DAD8A7;}
80% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #FF9E9D, 17px 34px 0 0 #DAD8A7, 17px 51px 0 0 #7FC7AF, 17px 68px 0 0 #3FB8AF, 17px 85px 0 0 #FF3D7F, 17px 102px 0 0 #FF9E9D, 17px 119px 0 0 #DAD8A7, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #FF3D7F, 34px 34px 0 0 #FF9E9D, 34px 51px 0 0 #DAD8A7, 34px 68px 0 0 #7FC7AF, 34px 85px 0 0 #3FB8AF, 34px 102px 0 0 #FF3D7F, 34px 119px 0 0 #FF9E9D, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #3FB8AF, 51px 34px 0 0 #FF3D7F, 51px 51px 0 0 #FF9E9D, 51px 68px 0 0 #DAD8A7, 51px 85px 0 0 #7FC7AF, 51px 102px 0 0 #3FB8AF, 51px 119px 0 0 #FF3D7F, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #7FC7AF, 68px 34px 0 0 #3FB8AF, 68px 51px 0 0 #FF3D7F, 68px 68px 0 0 #FF9E9D, 68px 85px 0 0 #DAD8A7, 68px 102px 0 0 #7FC7AF, 68px 119px 0 0 #3FB8AF, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #DAD8A7, 85px 34px 0 0 #7FC7AF, 85px 51px 0 0 #3FB8AF, 85px 68px 0 0 #FF3D7F, 85px 85px 0 0 #FF9E9D, 85px 102px 0 0 #DAD8A7, 85px 119px 0 0 #7FC7AF, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #FF9E9D, 102px 34px 0 0 #DAD8A7, 102px 51px 0 0 #7FC7AF, 102px 68px 0 0 #3FB8AF, 102px 85px 0 0 #FF3D7F, 102px 102px 0 0 #FF9E9D, 102px 119px 0 0 #DAD8A7, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #FF3D7F, 119px 34px 0 0 #FF9E9D, 119px 51px 0 0 #DAD8A7, 119px 68px 0 0 #7FC7AF, 119px 85px 0 0 #3FB8AF, 119px 102px 0 0 #FF3D7F, 119px 119px 0 0 #FF9E9D;}

}
@keyframes shadows {
0% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #FF3D7F, 17px 34px 0 0 #FF9E9D, 17px 51px 0 0 #DAD8A7, 17px 68px 0 0 #7FC7AF, 17px 85px 0 0 #3FB8AF, 17px 102px 0 0 #FF3D7F, 17px 119px 0 0 #FF9E9D, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #3FB8AF, 34px 34px 0 0 #FF3D7F, 34px 51px 0 0 #FF9E9D, 34px 68px 0 0 #DAD8A7, 34px 85px 0 0 #7FC7AF, 34px 102px 0 0 #3FB8AF, 34px 119px 0 0 #FF3D7F, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #7FC7AF, 51px 34px 0 0 #3FB8AF, 51px 51px 0 0 #FF3D7F, 51px 68px 0 0 #FF9E9D, 51px 85px 0 0 #DAD8A7, 51px 102px 0 0 #7FC7AF, 51px 119px 0 0 #3FB8AF, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #DAD8A7, 68px 34px 0 0 #7FC7AF, 68px 51px 0 0 #3FB8AF, 68px 68px 0 0 #FF3D7F, 68px 85px 0 0 #FF9E9D, 68px 102px 0 0 #DAD8A7, 68px 119px 0 0 #7FC7AF, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #FF9E9D, 85px 34px 0 0 #DAD8A7, 85px 51px 0 0 #7FC7AF, 85px 68px 0 0 #3FB8AF, 85px 85px 0 0 #FF3D7F, 85px 102px 0 0 #FF9E9D, 85px 119px 0 0 #DAD8A7, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #FF3D7F, 102px 34px 0 0 #FF9E9D, 102px 51px 0 0 #DAD8A7, 102px 68px 0 0 #7FC7AF, 102px 85px 0 0 #3FB8AF, 102px 102px 0 0 #FF3D7F, 102px 119px 0 0 #FF9E9D, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #3FB8AF, 119px 34px 0 0 #FF3D7F, 119px 51px 0 0 #FF9E9D, 119px 68px 0 0 #DAD8A7, 119px 85px 0 0 #7FC7AF, 119px 102px 0 0 #3FB8AF, 119px 119px 0 0 #FF3D7F;}
20% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #3FB8AF, 17px 34px 0 0 #FF3D7F, 17px 51px 0 0 #FF9E9D, 17px 68px 0 0 #DAD8A7, 17px 85px 0 0 #7FC7AF, 17px 102px 0 0 #3FB8AF, 17px 119px 0 0 #FF3D7F, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #7FC7AF, 34px 34px 0 0 #3FB8AF, 34px 51px 0 0 #FF3D7F, 34px 68px 0 0 #FF9E9D, 34px 85px 0 0 #DAD8A7, 34px 102px 0 0 #7FC7AF, 34px 119px 0 0 #3FB8AF, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #DAD8A7, 51px 34px 0 0 #7FC7AF, 51px 51px 0 0 #3FB8AF, 51px 68px 0 0 #FF3D7F, 51px 85px 0 0 #FF9E9D, 51px 102px 0 0 #DAD8A7, 51px 119px 0 0 #7FC7AF, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #FF9E9D, 68px 34px 0 0 #DAD8A7, 68px 51px 0 0 #7FC7AF, 68px 68px 0 0 #3FB8AF, 68px 85px 0 0 #FF3D7F, 68px 102px 0 0 #FF9E9D, 68px 119px 0 0 #DAD8A7, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #FF3D7F, 85px 34px 0 0 #FF9E9D, 85px 51px 0 0 #DAD8A7, 85px 68px 0 0 #7FC7AF, 85px 85px 0 0 #3FB8AF, 85px 102px 0 0 #FF3D7F, 85px 119px 0 0 #FF9E9D, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #3FB8AF, 102px 34px 0 0 #FF3D7F, 102px 51px 0 0 #FF9E9D, 102px 68px 0 0 #DAD8A7, 102px 85px 0 0 #7FC7AF, 102px 102px 0 0 #3FB8AF, 102px 119px 0 0 #FF3D7F, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #7FC7AF, 119px 34px 0 0 #3FB8AF, 119px 51px 0 0 #FF3D7F, 119px 68px 0 0 #FF9E9D, 119px 85px 0 0 #DAD8A7, 119px 102px 0 0 #7FC7AF, 119px 119px 0 0 #3FB8AF;}
40% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #7FC7AF, 17px 34px 0 0 #3FB8AF, 17px 51px 0 0 #FF3D7F, 17px 68px 0 0 #FF9E9D, 17px 85px 0 0 #DAD8A7, 17px 102px 0 0 #7FC7AF, 17px 119px 0 0 #3FB8AF, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #DAD8A7, 34px 34px 0 0 #7FC7AF, 34px 51px 0 0 #3FB8AF, 34px 68px 0 0 #FF3D7F, 34px 85px 0 0 #FF9E9D, 34px 102px 0 0 #DAD8A7, 34px 119px 0 0 #7FC7AF, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #FF9E9D, 51px 34px 0 0 #DAD8A7, 51px 51px 0 0 #7FC7AF, 51px 68px 0 0 #3FB8AF, 51px 85px 0 0 #FF3D7F, 51px 102px 0 0 #FF9E9D, 51px 119px 0 0 #DAD8A7, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #FF3D7F, 68px 34px 0 0 #FF9E9D, 68px 51px 0 0 #DAD8A7, 68px 68px 0 0 #7FC7AF, 68px 85px 0 0 #3FB8AF, 68px 102px 0 0 #FF3D7F, 68px 119px 0 0 #FF9E9D, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #3FB8AF, 85px 34px 0 0 #FF3D7F, 85px 51px 0 0 #FF9E9D, 85px 68px 0 0 #DAD8A7, 85px 85px 0 0 #7FC7AF, 85px 102px 0 0 #3FB8AF, 85px 119px 0 0 #FF3D7F, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #7FC7AF, 102px 34px 0 0 #3FB8AF, 102px 51px 0 0 #FF3D7F, 102px 68px 0 0 #FF9E9D, 102px 85px 0 0 #DAD8A7, 102px 102px 0 0 #7FC7AF, 102px 119px 0 0 #3FB8AF, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #DAD8A7, 119px 34px 0 0 #7FC7AF, 119px 51px 0 0 #3FB8AF, 119px 68px 0 0 #FF3D7F, 119px 85px 0 0 #FF9E9D, 119px 102px 0 0 #DAD8A7, 119px 119px 0 0 #7FC7AF;}
60% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #DAD8A7, 17px 34px 0 0 #7FC7AF, 17px 51px 0 0 #3FB8AF, 17px 68px 0 0 #FF3D7F, 17px 85px 0 0 #FF9E9D, 17px 102px 0 0 #DAD8A7, 17px 119px 0 0 #7FC7AF, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #FF9E9D, 34px 34px 0 0 #DAD8A7, 34px 51px 0 0 #7FC7AF, 34px 68px 0 0 #3FB8AF, 34px 85px 0 0 #FF3D7F, 34px 102px 0 0 #FF9E9D, 34px 119px 0 0 #DAD8A7, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #FF3D7F, 51px 34px 0 0 #FF9E9D, 51px 51px 0 0 #DAD8A7, 51px 68px 0 0 #7FC7AF, 51px 85px 0 0 #3FB8AF, 51px 102px 0 0 #FF3D7F, 51px 119px 0 0 #FF9E9D, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #3FB8AF, 68px 34px 0 0 #FF3D7F, 68px 51px 0 0 #FF9E9D, 68px 68px 0 0 #DAD8A7, 68px 85px 0 0 #7FC7AF, 68px 102px 0 0 #3FB8AF, 68px 119px 0 0 #FF3D7F, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #7FC7AF, 85px 34px 0 0 #3FB8AF, 85px 51px 0 0 #FF3D7F, 85px 68px 0 0 #FF9E9D, 85px 85px 0 0 #DAD8A7, 85px 102px 0 0 #7FC7AF, 85px 119px 0 0 #3FB8AF, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #DAD8A7, 102px 34px 0 0 #7FC7AF, 102px 51px 0 0 #3FB8AF, 102px 68px 0 0 #FF3D7F, 102px 85px 0 0 #FF9E9D, 102px 102px 0 0 #DAD8A7, 102px 119px 0 0 #7FC7AF, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #FF9E9D, 119px 34px 0 0 #DAD8A7, 119px 51px 0 0 #7FC7AF, 119px 68px 0 0 #3FB8AF, 119px 85px 0 0 #FF3D7F, 119px 102px 0 0 #FF9E9D, 119px 119px 0 0 #DAD8A7;}
80% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 17px 0 0 rgba(255,255,255,0), 0px 34px 0 0 rgba(255,255,255,0), 0px 51px 0 0 rgba(255,255,255,0), 0px 68px 0 0 rgba(255,255,255,0), 0px 85px 0 0 rgba(255,255,255,0), 0px 102px 0 0 rgba(255,255,255,0), 0px 119px 0 0 rgba(255,255,255,0), 17px 0px 0 0 rgba(255,255,255,0), 17px 17px 0 0 #FF9E9D, 17px 34px 0 0 #DAD8A7, 17px 51px 0 0 #7FC7AF, 17px 68px 0 0 #3FB8AF, 17px 85px 0 0 #FF3D7F, 17px 102px 0 0 #FF9E9D, 17px 119px 0 0 #DAD8A7, 34px 0px 0 0 rgba(255,255,255,0), 34px 17px 0 0 #FF3D7F, 34px 34px 0 0 #FF9E9D, 34px 51px 0 0 #DAD8A7, 34px 68px 0 0 #7FC7AF, 34px 85px 0 0 #3FB8AF, 34px 102px 0 0 #FF3D7F, 34px 119px 0 0 #FF9E9D, 51px 0px 0 0 rgba(255,255,255,0), 51px 17px 0 0 #3FB8AF, 51px 34px 0 0 #FF3D7F, 51px 51px 0 0 #FF9E9D, 51px 68px 0 0 #DAD8A7, 51px 85px 0 0 #7FC7AF, 51px 102px 0 0 #3FB8AF, 51px 119px 0 0 #FF3D7F, 68px 0px 0 0 rgba(255,255,255,0), 68px 17px 0 0 #7FC7AF, 68px 34px 0 0 #3FB8AF, 68px 51px 0 0 #FF3D7F, 68px 68px 0 0 #FF9E9D, 68px 85px 0 0 #DAD8A7, 68px 102px 0 0 #7FC7AF, 68px 119px 0 0 #3FB8AF, 85px 0px 0 0 rgba(255,255,255,0), 85px 17px 0 0 #DAD8A7, 85px 34px 0 0 #7FC7AF, 85px 51px 0 0 #3FB8AF, 85px 68px 0 0 #FF3D7F, 85px 85px 0 0 #FF9E9D, 85px 102px 0 0 #DAD8A7, 85px 119px 0 0 #7FC7AF, 102px 0px 0 0 rgba(255,255,255,0), 102px 17px 0 0 #FF9E9D, 102px 34px 0 0 #DAD8A7, 102px 51px 0 0 #7FC7AF, 102px 68px 0 0 #3FB8AF, 102px 85px 0 0 #FF3D7F, 102px 102px 0 0 #FF9E9D, 102px 119px 0 0 #DAD8A7, 119px 0px 0 0 rgba(255,255,255,0), 119px 17px 0 0 #FF3D7F, 119px 34px 0 0 #FF9E9D, 119px 51px 0 0 #DAD8A7, 119px 68px 0 0 #7FC7AF, 119px 85px 0 0 #3FB8AF, 119px 102px 0 0 #FF3D7F, 119px 119px 0 0 #FF9E9D;}

}

Author

Related Articles

Leave a comment

Creative Buck ©2016. All Rights Reserved.

Search

Back to Top