css代码植入木马,CSS3 木马玩具

CSS

语言：

CSSSCSS

确定

html {

box-sizing: border-box;

}

*,

*:after,

*:before {

box-sizing: inherit;

}

body {

font-family: arial, sans-serif;

color: #282828;

font-size: 14px;

padding: 10px;

}

a,

a.active {

color: inherit;

text-decoration: none;

}

.content-horse {

position: relative;

padding: 40px;

float: left;

display: block;

width: 120px;

height: 200px;

margin-top: 0px;

margin-left: 50px;

}

.horse-toy {

-webkit-transform-origin: 50% 50%;

-ms-transform-origin: 50% 50%;

transform-origin: 50% 50%;

position: absolute;

width: 158px;

height: 158px;

left: 0;

top: 0;

background: url("http://sergioand.com/lab/horse.png") center center no-repeat;

-webkit-animation: horse_toy 1s ease-in-out infinite alternate;

animation: horse_toy 1s ease-in-out infinite alternate;

}

@-webkit-keyframes horse_toy {

from {

-webkit-transform: rotate(-30deg) translateY(-7px);

transform: rotate(-30deg) translateY(-7px);

}

to {

-webkit-transform: rotate(30deg) translateY(0);

transform: rotate(30deg) translateY(0);

}

}

@keyframes horse_toy {

from {

-webkit-transform: rotate(-30deg) translateY(-7px);

transform: rotate(-30deg) translateY(-7px);

}

to {

-webkit-transform: rotate(30deg) translateY(0);

transform: rotate(30deg) translateY(0);

}

}

.horse-wrap {

position: absolute;

width: 158px;

height: 158px;

left: 50%;

top: 50%;

margin-left: -79px;

margin-top: -79px;

-webkit-animation: horse_toy_move 1s ease-in-out infinite alternate;

animation: horse_toy_move 1s ease-in-out infinite alternate;

}

.horse-wrap:before {

content: "";

position: absolute;

width: 158px;

height: 10px;

background: rgba(0, 0, 0, 0.5);

border-radius: 50%;

bottom: 4px;

left: 0;

}

@-webkit-keyframes horse_toy_move {

from {

-webkit-transform: translateX(-60px);

transform: translateX(-60px);

}

to {

-webkit-transform: translateX(60px);

transform: translateX(60px);

}

}

@keyframes horse_toy_move {

from {

-webkit-transform: translateX(-60px);

transform: translateX(-60px);

}

to {

-webkit-transform: translateX(60px);

transform: translateX(60px);

}

}

.button {

display: block;

float: left;

padding: 20px 40px;

background: #fff;

border-radius: 3px;

border: 2px solid #10a1ea;

overflow: hidden;

position: relative;

}

.button:after {

-webkit-transition: -webkit-transform 0.3s ease;

transition: transform 0.3s ease;

content: "";

position: absolute;

height: 200px;

width: 400px;

-webkit-transform: rotate(45deg) translateX(-540px) translateY(-100px);

-ms-transform: rotate(45deg) translateX(-540px) translateY(-100px);

transform: rotate(45deg) translateX(-540px) translateY(-100px);

background: #10a1ea;

z-index: 1;

}

.button:before {

-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

content: attr(title);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

color: #fff;

z-index: 2;

text-align: center;

padding: 20px 40px;

-webkit-transform: translateY(200px);

-ms-transform: translateY(200px);

transform: translateY(200px);

}

.button:hover {

text-decoration: none;

}

.button:hover:after {

-webkit-transform: translateX(-200px) translateY(-100px);

-ms-transform: translateX(-200px) translateY(-100px);

transform: translateX(-200px) translateY(-100px);

}

.button:hover:before {

-webkit-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}