@keyframes degs{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(720deg); } 100%{ transform: rotate(0deg); } } /*灯光闪烁*/ @keyframes Lighting{ 0%{ opacity: 1; } 100%{ opacity: 0; } } /*全屏抖动*/ @keyframes scale-body{ 0%{ transform: scale(1); } 33%{ transform: scale(1.01); } 66%{ transform: scale(1); } 72%{ transform: scale(1.01); } 80%{ transform: scale(1); } 88%{ transform: scale(1.01); } 100%{ transform: scale(1); } } @keyframes scale{ 0%{ transform: scale(.9); } 100%{ transform: scale(.91); } } @keyframes blendmode{ 0%{ mix-blend-mode: color-dodge; } 33%{ mix-blend-mode: difference; } 66%{ mix-blend-mode: luminosity; } 100%{ mix-blend-mode: color-dodge; } } /**/ @keyframes dancing-left{ 0%{ left: -50px; top: 0px; transform:rotateY(180deg); } 5%{ left: -40px; top: 10px; transform:rotateY(180deg); } 10%{ left: -30px; top: 0px; transform:rotateY(180deg); } 15%{ left: -20px; top: 10px; transform:rotateY(180deg); } 20%{ left: -10px; top: 0px; transform:rotateY(180deg); } 25%{ left: 0px; top: 10px; transform:rotateY(180deg); } 30%{ left: 10px; top: 0px; transform:rotateY(180deg); } 35%{ left: 20px; top: 10px; transform:rotateY(180deg); } 40%{ left: 30px; top: 0px; transform:rotateY(180deg); } 45%{ left: 40px; top: 10px; transform:rotateY(180deg); } 50%{ left: 50px; top:0px; transform:rotateY(0deg); } 55%{ left: 40px; top: 10px; transform:rotateY(0deg); } 60%{ left: 30px; top: 0px; transform:rotateY(0deg); } 65%{ left: 20px; top: 10px; transform:rotateY(0deg); } 70%{ left: 10px; top: 0px; transform:rotateY(0deg); } 75%{ left: 0px; top: 10px; transform:rotateY(0deg); } 80%{ left: -10px; top: 0px; transform:rotateY(0deg); } 85%{ left: -20px; top:10px; transform:rotateY(0deg); } 90%{ left: -30px; top: 0px; transform:rotateY(0deg); } 95%{ left: -40px; top: 10px; transform:rotateY(0deg); } 100%{ left: -50px; top: 0px; transform:rotateY(180deg); } } @keyframes dancing-right{ 0%{ right: -50px; top: 0px; transform:rotateY(180deg); } 5%{ right: -40px; top: 10px; transform:rotateY(180deg); } 10%{ right: -30px; top: 0px; transform:rotateY(180deg); } 15%{ right: -20px; top: 10px; transform:rotateY(180deg); } 20%{ right: -10px; top: 0px; transform:rotateY(180deg); } 25%{ right: 0px; top: 10px; transform:rotateY(180deg); } 30%{ right: 10px; top: 0px; transform:rotateY(180deg); } 35%{ right: 20px; top: 10px; transform:rotateY(180deg); } 40%{ right: 30px; top: 0px; transform:rotateY(180deg); } 45%{ right: 40px; top: 10px; transform:rotateY(180deg); } 50%{ right: 50px; top:0px; transform:rotateY(0deg); } 55%{ right: 40px; top: 10px; transform:rotateY(0deg); } 60%{ right: 30px; top: 0px; transform:rotateY(0deg); } 65%{ right: 20px; top: 10px; transform:rotateY(0deg); } 70%{ right: 10px; top: 0px; transform:rotateY(0deg); } 75%{ right: 0px; top: 10px; transform:rotateY(0deg); } 80%{ right: -10px; top: 0px; transform:rotateY(0deg); } 85%{ right: -20px; top:10px; transform:rotateY(0deg); } 90%{ right: -30px; top: 0px; transform:rotateY(0deg); } 95%{ right: -40px; top: 10px; transform:rotateY(0deg); } 100%{ right: -50px; top: 0px; transform:rotateY(180deg); } } @keyframes dancing-down{ 0%{ top: -20px; transform:rotateY(0deg); } 25%{ top: 0px; transform:rotateY(0deg); } 40%{ top: -20px; transform:rotateY(0deg); } 50%{ top: -100px; transform:rotateY(720deg); } 60%{ top: -20px; transform:rotateY(0deg); } 75%{ top: 0px; transform:rotateY(0deg); } 100%{ top: -20px; transform:rotateY(0deg); } } @keyframes dancing-Wobble{ from{ transform:rotate(0deg); transform-origin:79px 108px; } 10%{ transform:rotate(-20deg); transform-origin:79px 108px; } 20%{ transform:rotate(0deg); transform-origin:79px 108px; } 30%{ transform:rotate(-20deg); transform-origin:79px 108px; } 40%{ transform:rotate(0deg); transform-origin:79px 108px; } 50%{ transform:rotate(-20deg); transform-origin:79px 108px; } 60%{ transform:rotate(0deg); transform-origin:79px 108px; } 70%{ transform:rotate(-20deg); transform-origin:79px 108px; } 80%{ transform:rotate(0deg); transform-origin:79px 108px; } 90%{ transform:rotate(-20deg); transform-origin:79px 108px; } to{ transform:rotate(0deg); transform-origin:79px 108px; } } @keyframes dancing-Wobble-right{ from{ transform:rotate(0deg); transform-origin:79px 108px; } 10%{ transform:rotate(20deg); transform-origin:79px 108px; } 20%{ transform:rotate(0deg); transform-origin:79px 108px; } 30%{ transform:rotate(20deg); transform-origin:79px 108px; } 40%{ transform:rotate(0deg); transform-origin:79px 108px; } 50%{ transform:rotate(20deg); transform-origin:79px 108px; } 60%{ transform:rotate(0deg); transform-origin:79px 108px; } 70%{ transform:rotate(20deg); transform-origin:79px 108px; } 80%{ transform:rotate(0deg); transform-origin:79px 108px; } 90%{ transform:rotate(20deg); transform-origin:79px 108px; } to{ transform:rotate(0deg); transform-origin:79px 108px; } } @keyframes dancing-UP{ from{ transform:scale(1,1) } 10%{ transform:scale(1.1,1.1) } 20%{ transform:scale(1,1) } 30%{ transform:scale(1.1,1.1) } 40%{ transform:scale(1,1) } 50%{ transform:scale(1.1,1.1) } 60%{ transform:scale(1,1) } 70%{ transform:scale(1.1,1.1) } 80%{ transform:scale(1,1) } 90%{ transform:scale(1.1,1.1) } 100%{ transform:scale(1,1) } } /*镜头拉近*/ @keyframes scale-left{ 0{ transform:scale(1,1); transform-origin:0rem 18.75rem; } 1%{ transform:scale(1.4,1.4); transform-origin:0rem 18.75rem; } 40%{ transform:scale(1.4,1.4); transform-origin:100% 18.75rem; } 70%{ transform-origin:50% 50%; transform: scale(0.9,0.9); } 100%{ transform-origin:50% 50%; transform: scale(1,1); } } @keyframes scale-right{ 0{ transform:scale(1,1); transform-origin:100% 18.75rem; } 1%{ transform:scale(1.4,1.4); transform-origin:100% 18.75rem; } 90%{ transform:scale(1.4,1.4); transform-origin:0 18.75rem; } 100%{ transform-origin:0 18.75rem; transform:scale(1,1); } } @keyframes scale-bottom-right{ 0{ transform:scale(1,1); transform-origin:100% 43.75rem; } 1%{ transform:scale(1.4,1.4); transform-origin:100% 43.75rem; } 40%{ transform:scale(1.4,1.4); transform-origin:0 43.75rem; } 70%{ transform-origin:50% 50%; transform: scale(0.9,0.9); } 100%{ transform-origin:50% 50%; transform: scale(1,1); } } @keyframes scale-bottom-left{ 0{ transform:scale(1,1); transform-origin:0 43.75rem; } 1%{ transform:scale(1.4,1.4); transform-origin:0 43.75rem; } 90%{ transform:scale(1.4,1.4); transform-origin:100% 43.75rem; } 100%{ transform-origin:100% 43.75rem; transform:scale(1,1); } } @keyframes Wobble{ from{ transform:rotate(0deg); transform-origin:22px 60px; } 25%{ transform:rotate(30deg); transform-origin:right bottom; transform-origin:22px 60px; } 50%{ transform:rotate(0deg); transform-origin:right bottom; transform-origin:22px 60px; } 75%{ transform:rotate(-30deg); transform-origin:right bottom; transform-origin:22px 60px; } 100%{ transform:rotate(0deg); transform-origin:22px 60px; } } /*人物行走*/ @keyframes run-right-bottom{ from{ transform:translate(0,0); } to{ transform:translate(300px,100px); } } @keyframes run-left-bottom{ from{ transform:translate(0,0); } to{ transform:translate(-300px,100px); } } @keyframes run-right-top{ from{ transform:translate(0,0); } to{ transform:translate(300px,-100px); } } @keyframes run-left-top{ from{ transform:translate(0,0); } to{ transform:translate(-300px,-100px); } } @keyframes run-right{ from{ transform:translate(0,0); } to{ transform:translate(300px,0); } } @keyframes run-left{ from{ transform:translate(0,0); } to{ transform:translate(-300px,0); } } @keyframes run-top{ from{ transform:translate(0,0); } to{ transform:translate(0px,-100px); } } @keyframes run-bottom{ from{ transform:translate(0,0); } to{ transform:translate(0px,100px); } }