CSS
语言:
CSSSCSS
确定
body {
-webkit-perspective: 800px;
perspective: 800px;
background: #333 url("http://mephysto.github.io/sandbox/oceanscene.jpg?v=1");
background-size: cover;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/*
CSS ANIMATIONS
*/
@-webkit-keyframes rotatingAnimation {
0% {
-webkit-transform: translate3d(0, 0, 0px) rotateY(0deg);
transform: translate3d(0, 0, 0px) rotateY(0deg);
}
100% {
-webkit-transform: translate3d(0, 0, 0px) rotateY(360deg);
transform: translate3d(0, 0, 0px) rotateY(360deg);
}
}
@keyframes rotatingAnimation {
0% {
-webkit-transform: translate3d(0, 0, 0px) rotateY(0deg);
transform: translate3d(0, 0, 0px) rotateY(0deg);
}
100% {
-webkit-transform: translate3d(0, 0, 0px) rotateY(360deg);
transform: translate3d(0, 0, 0px) rotateY(360deg);
}
}
@-webkit-keyframes swimmingAnimation {
0% {
-webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);
transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);
}
100% {
-webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);
transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);
}
}
@keyframes swimmingAnimation {
0% {
-webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);
transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);
}
100% {
-webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);
transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);
}
}
@-webkit-keyframes wiggle-end {
0% {
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
100% {
-webkit-transform: rotateY(10deg);
transform: rotateY(10deg);
}
}
@keyframes wiggle-end {
0% {
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
100% {
-webkit-transform: rotateY(10deg);
transform: rotateY(10deg);
}
}
@-webkit-keyframes wiggle-body {
0% {
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
100% {
-webkit-transform: rotateY(10deg);
transform: rotateY(10deg);
}
}
@keyframes wiggle-body {
0% {
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
100% {
-webkit-transform: rotateY(10deg);
transform: rotateY(10deg);
}
}
@-webkit-keyframes fish-lift {
0% {
-webkit-transform: translate(0px, 12px);
transform: translate(0px, 12px);
}
100% {
-webkit-transform: translate(0px, -12px);
transform: translate(0px, -12px);
}
}
@keyframes fish-lift {
0% {
-webkit-transform: translate(0px, 12px);
transform: translate(0px, 12px);
}
100% {
-webkit-transform: translate(0px, -12px);
transform: translate(0px, -12px);
}
}
@-webkit-keyframes fish-roll {
0% {
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
}
100% {
-webkit-transform: rotateX(10deg);
transform: rotateX(10deg);
}
}
@keyframes fish-roll {
0% {
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
}
100% {
-webkit-transform: rotateX(10deg);
transform: rotateX(10deg);
}
}
/*
Fish Styling
*/
.fish-wrapper {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: rotatingAnimation 10000ms infinite linear;
animation: rotatingAnimation 10000ms infinite linear;
}
.fish-container {
position: absolute;
z-index: 500;
left: 50%;
top: 50%;
-webkit-perspective: 10000px;
perspective: 10000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.fish-container .fish-body {
background-image: url(/uploads/161001/goldfish-sprite.png?v=1);
background-position: -208px 0px;
width: 312px;
height: 169px;
top: -84.5px;
left: -156px;
}
.fish-container .fish-body.front {
z-index: 300;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotateY(5deg);
transform: rotateY(5deg);
}
.fish-container .fish-body.back {
z-index: 100;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotateY(-5deg);
transform: rotateY(-5deg);
}
.fish-container .fish-top-fin {
background-image: url(/uploads/161001/goldfish-sprite.png?v=1);
background-position: 0px -263px;
width: 150px;
height: 124px;
left: -157px;
top: -176px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: fish-roll 1750ms infinite alternate ease-in-out;
animation: fish-roll 1750ms infinite alternate ease-in-out;
}
.fish-container .fish-back-bottom-fin {
background-image: url(/uploads/161001/goldfish-sprite.png?v=1);
background-position: -208px -169px;
width: 73px;
height: 68px;
left: -106px;
top: 61px;
}
.fish-container .fish-back-bottom-fin.front {
z-index: 300;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: fish-roll 1750ms infinite alternate ease-in-out;
animation: fish-roll 1750ms infinite alternate ease-in-out;
}
.fish-container .fish-back-bottom-fin.back {
z-index: 100;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;
animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;
}
.fish-container .fish-back-fin {
background-image: url(/uploads/161001/goldfish-sprite.png?v=1);
background-position: 0px 0px;
width: 208px;
height: 263px;
left: -320px;
top: -91px;
background-position: 0% 0;
-webkit-transform-origin: 105% 0;
transform-origin: 105% 0;
-webkit-animation: wiggle-end 200ms infinite alternate ease-in-out;
animation: wiggle-end 200ms infinite alternate ease-in-out;
}
.fish-container .fish-front-bottom-fin {
background-image: url(/uploads/161001/goldfish-sprite.png?v=1);
background-position: -281px -169px;
width: 51px;
height: 65px;
left: -1px;
top: 46px;
}
.fish-container .fish-front-bottom-fin.front {
z-index: 300;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: fish-roll 1750ms infinite alternate ease-in-out;
animation: fish-roll 1750ms infinite alternate ease-in-out;
}
.fish-container .fish-front-bottom-fin.back {
z-index: 100;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;
animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;
}
.fish-parts {
-webkit-transition: 250ms;
transition: 250ms;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: swimmingAnimation 1000ms infinite alternate ease-in-out;
animation: swimmingAnimation 1000ms infinite alternate ease-in-out;
}
.fish-parts > div {
position: absolute;
z-index: 200;
}