css实现三维天空蝴蝶飞舞动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维天空蝴蝶飞舞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> /** * MIXINS */ /* SYMBOLS */ /** * KEYFRAMES */ @-webkit-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-moz-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-ms-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-o-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-webkit-keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } @-moz-keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } @-ms-keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } @-o-keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } @keyframes rotatingY { 100% { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } } /**/ @-webkit-keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @-moz-keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @-ms-keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @-o-keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @keyframes fluttering { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 60% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); } 30%, 80% { -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); -o-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } /**/ @-webkit-keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @-moz-keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @-ms-keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @-o-keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @keyframes left-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg); } } @-webkit-keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } @-moz-keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } @-ms-keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } @-o-keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } @keyframes right-wing-flap { 0% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } 50% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg); } 100% { -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg); } } /** * */ /** * SOURCE */ body { width: 100%; height: 100%; overflow: hidden; } .background { position: absolute; width: 100%; height: 100%; } .scene3d { -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .skybox.cube { position: absolute; left: 50%; top: 50%; width: 512px; height: 512px; margin-left: -256px; margin-top: -256px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotatingY 40s linear infinite; -moz-animation: rotatingY 40s linear infinite; -ms-animation: rotatingY 40s linear infinite; -o-animation: rotatingY 40s linear infinite; animation: rotatingY 40s linear infinite; } .skybox.cube var.scale { position: absolute; left: 50%; top: 50%; width: 512px; height: 512px; margin-left: -256px; margin-top: -256px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); -moz-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); -ms-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); -o-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4); } .skybox.cube .face { position: absolute; left: 50%; top: 50%; width: 512px; height: 512px; margin-left: -256px; margin-top: -256px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .skybox.cube .face.front { -webkit-transform: rotateY(0deg) translateZ(-256px); -moz-transform: rotateY(0deg) translateZ(-256px); -ms-transform: rotateY(0deg) translateZ(-256px); -o-transform: rotateY(0deg) translateZ(-256px); transform: rotateY(0deg) translateZ(-256px); background-image: url("//repo.bfw.wiki/bfwrepo/image/60fe037d081bf.png"); } .skybox.cube .face.back { -webkit-transform: rotateY(180deg) translateZ(-256px); -moz-transform: rotateY(180deg) translateZ(-256px); -ms-transform: rotateY(180deg) translateZ(-256px); -o-transform: rotateY(180deg) translateZ(-256px); transform: rotateY(180deg) translateZ(-256px); background-image: url("//repo.bfw.wiki/bfwrepo/image/60fe0390d61fa.png"); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0