그라데이션 박스 예제

<style type="text/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;}

}

</style>

  

<div class='box' style="text-align:center;">

<div id="" style=" position:absolute;  z-index:5; background:#ffffff; margin:5px 0 0 5px; width:110px; height:110px;">

내용

</div>

<span class='dot'></span>

</div>