DIR : /home/kozerus/public_html/jkwii/js/jsdoit/hang/style.css

/home/kozerus/public_html/jkwii/js/jsdoit/hang

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: "Hiragino Maru Gothic Pro",sans-serif;
    background: #fff;
}

#wrap {
    width: 430px;
    margin: auto;
    margin-top: 200px;
	-webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000px;
}

p {
    position: relative;
}

p:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 300px;
    position: absolute;
    bottom: -30px;
    margin-left: 25px;
    background: orange;
    box-shadow: 0 0 3px orange;
}

p:nth-of-type(1):before,p:nth-of-type(3):before  {
    bottom: -10px;
}
p:nth-of-type(2):before,p:nth-of-type(4):before  {
    bottom: -34px;
}
p:nth-of-type(5):before,p:nth-of-type(7):before  {
    bottom: -10px;
}

p:nth-of-type(1) {
    -webkit-animation: anime 3s linear 0s 2 normal;
}

p:nth-of-type(2) {
    -webkit-animation: anime2 3s linear 0s 2 normal;
}

p:nth-of-type(3) {
    -webkit-animation: anime3 3.5s linear 0s 1 normal;
}

p:nth-of-type(4) {
    -webkit-animation: anime 1s linear 0s 3 normal;
}

p:nth-of-type(5) {
    -webkit-animation: anime2 2s linear 0s 2 normal;
}

p:nth-of-type(6) {
    -webkit-animation: anime3 2.5s linear 0s 1 normal;
}

p:nth-of-type(7) {
    -webkit-animation: anime3 3.3s linear 0s 1 normal;
}


@-webkit-keyframes anime {
	0% { -webkit-transform:rotateY(0deg);}
	100% { -webkit-transform:  rotateY(360deg);}
}

@-webkit-keyframes anime2 {
	0% { -webkit-transform:rotateY(360deg);}
	100% { -webkit-transform:  rotateY(0deg);}
}

@-webkit-keyframes anime3 {
	0% { -webkit-transform:rotateY(180deg);}
	100% { -webkit-transform:  rotateY(0deg);}
}



span {
    display: block;
    font-size: 100%;
    font-weight: 900;
    float: left;    
    position :relative;
}

#m1,#m3 {
    color: #dc3c86;
    font-size: 70px;
    text-shadow: 1px 1px 0 #dc3c86,1px -1px 0 #dc3c86,
        -1px 1px 0 #dc3c86,-1px -1px 0 #dc3c86;
    top: -20px;
    -webkit-transform: rotateZ(-15deg);
}

#m2,#m4 {
    color: #dc3c86;
    font-size: 50px;
    text-shadow: 1px 1px 0 #dc3c86,1px -1px 0 #dc3c86,
        -1px 1px 0 #dc3c86,-1px -1px 0 #dc3c86;
    top: 20px;
    -webkit-transform: rotateZ(10deg);
}

#m5,#m6,#m7 {
    font-size: 55px;
}

#m5 {
    color: #ed8500;
    text-shadow: 1px 1px 0 #ed8500,1px -1px 0 #ed8500,
        -1px 1px 0 #ed8500,-1px -1px 0 #ed8500;
    top: -10px;
}

#m6 {
    color: #3fa21e;
    text-shadow: 1px 1px 0 #3fa21e,1px -1px 0 #3fa21e,
        -1px 1px 0 #3fa21e,-1px -1px 0 #3fa21e;
    top: 10px;
    -webkit-transform: rotateZ(-10deg);
}

#m7 {
    color: #008be6;
    text-shadow: 1px 1px 0 #008be6,1px -1px 0 #008be6,
        -1px 1px 0 #008be6,-1px -1px 0 #008be6;
    top: -10px;
}