vue+svg实现下雪中的小鸟飞行动画效果代码
代码语言:html
所属分类:动画
代码描述:vue+svg实现下雪中的小鸟飞行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; align-items: center; justify-content: center; position: relative; height: 100vh; background-color: slategray; } .winter-time { position: fixed; z-index: 9999999; top: 0; left: 0; height: 100vh; width: 100%; overflow: hidden; -webkit-animation: snowBackground 3s forwards; animation: snowBackground 3s forwards; } .snow { fill: #fff; } .snow-dark { fill: #95dbf9; } .snowy { width: 100%; height: 100%; } .snow-pile { top: 0; height: 100%; line-height: 0; } .snow-pile, .snow-pile::after, .snow-pile-shape { position: absolute; left: 0; width: 100%; } .snow-pile::after { content: ""; bottom: 5px; height: calc(50% + 5px); background-color: #fff; transform-origin: bottom center; transform: scaleY(0); -webkit-animation: snowUp 3s 5.5s ease-in-out forwards; animation: snowUp 3s 5.5s ease-in-out forwards; } .snow-pile-shape { bottom: -5px; -webkit-animation: snowUpBottom 3s 5.5s ease-in-out forwards; animation: snowUpBottom 3s 5.5s ease-in-out forwards; } .snow-pile-path, .snow-pile-path-dark { transform-origin: bottom center; transform: scaleY(0); -webkit-animation: snowUp 3s ease-in-out forwards; animation: snowUp 3s ease-in-out forwards; } .snow-pile-path { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } .snow-pile-path-dark { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .snow-flake { transform-origin: 10px 0; transform: translateY(-50px); -webkit-animation-name: fallingSnow; animation-name: fallingSnow; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } .snow-peng { position: absolute; left: 0; top: 35%; width: 100%; -webkit-animation: floatDown 1s 8s forwards; animation: floatDown 1s 8s forwards; transform: translateY(-200%); } .peng { transform: scale(0.5); -webkit-animation: sliding 5s 11.5s infinite alternate ease-out; animation: sliding 5s 11.5s infinite alternate ease-out; } .peng-flip { -webkit-animation: flipper 10s 11.5s infinite; animation: flipper 10s 11.5s infinite; } .peng-boing { -webkit-animation: boing 0.2s 9s forwards; animation: boing 0.2s 9s forwards; } .peng-slide { transform: translateX(850px); transform-origin: bottom center; -webkit-animation: slidingLeft 1.1s 10.5s ease-out forwards; animation: slidingLeft 1.1s 10.5s ease-out forwards; } .peng-scarf-under { -webkit-animation: windy 0.3s 10.6s infinite; animation: windy 0.3s 10.6s infinite; } .peng-foot { -webkit-animation: footMove 1s 10.6s infinite; animation: footMove 1s 10.6s infinite; } .peng-arm { -webkit-animation: armMove 2s 10.6s infinite; animation: armMove 2s 10.6s infinite; } .peng-body { -webkit-animation: toSlidePosBody 1s 9.4s forwards; animation: toSlidePosBody 1s 9.4s forwards; } .peng-head { -webkit-animation: toSlidePosHead 1s 9.4s forwards; animation: toSlidePosHead 1s 9.4s forwards; } .peng-scarf { -webkit-animation: toSlidePosScarf 1s 9.4s forwards; animation: toSlidePosScarf 1s 9.4s forwards; } .peng-scarf-main { -webkit-animation: toSlidePosScarfMain 1s 9.4s forwards; animation: toSlidePosScarfMain 1s 9.4s forwards; } .peng-1 { fill: #bde7ff; } .peng-2 { fill: #fff; } .peng-3 { fill: #db6a1f; } .peng-4 { fill: #95dbf9; } .peng-5 { fill: #ff8931; } .peng-6 { fill: #ff5086; opacity: 0.3; } .peng-7 { fill: #444; } .peng-8 { fill: #db4242; } .peng-9 { fill: #ff5252; } @-webkit-keyframes snowBackground { 100% { background-color: rgba(0, 17, 34, 0.8); } } @keyframes snowBackground { 100% { background-color: rgba(0, 17, 34, 0.8); } } @-webkit-keyframes fallingSnow { 0% { transform: translateY(-50px); } 100% { transform: translateY(100%); } } @keyframes fallingSnow { 0% { transform: translateY(-50px); } 100% { transform: translateY(100%); } } @-webkit-keyframes snowUp { 100% { transform: scaleY(1); } } @keyframes snowUp { 100% { transform: scaleY(1); } } @-webkit-keyframes snowUpBottom { 100% { bottom: 50%; } } @keyframes snowUpBottom { 100% { bottom: 50%; } } @-webkit-keyframes floatDown { 0% { transform: translateY(-200%); } 100% { transform: translateY(0); } } @keyframes floatDown { 0% { transform: translateY(-200%); } 100% { transform: translateY(0); } } @-webkit-keyframes boing { 0% { transform: scaleY(0.8); } 40% { transform: scaleY(1.05); } 70% { transform: scaleY(0.95); } 100% { transfrom: scaleY(1); } } @keyframes boing { 0% { transform: scaleY(0.8); } 40% { transform: scaleY(1.05); } 70% { transform: scaleY(0.95); } 100% { transfrom: scaleY(1); } } @-webkit-keyframes slidingLeft { 0% { transform: translateX(850px); } 99.9% { transform: translateX(-420px); } 100% { transform: translateX(0); } } @keyframes slidingLeft { 0% { transform: translateX(850px); } 99.9% { transform: translateX(-420px); } 100% { transform: translateX(0); } } @-webkit-keyframes toSlidePosBody { 100% { transform: rotate(-80deg); } } @keyframes toSlidePosBody { 100% { transform: rotate(-80deg); } } @-webkit-keyframes toSlidePosHead { 100% { transform: rotate(-28deg); } } @keyframes toSlidePosHead { 100% { transform: rotate(-28deg); } } @-webkit-keyframes toSlidePosScarfMain { 100% { transform: scaleX(0.95); } } @keyframes toSlidePosScarfMain { 100% { transform: scaleX(0.95); } } @-webkit-keyframes toSlidePosScarf { 100% { transform: rotate(-44deg); } } @keyframes toSlidePosScarf { 100% { transform: rotate(-44deg); } } @-webkit-keyframes sliding { 0% { transform: scale(0.5) translateX(-420px); } 100% { transform: scale(0.5) translateX(2420px); } } @keyframes sliding { 0% { transform: scale(0.5) translateX(-420px); } 100% { transform: scale(0.5) translateX(2420px); } } @supports (offset-path: path("M0,100")) { @-webkit-keyframes sliding { 0%, 100% { offset-path: path("M-520,210S-171.6634,10,141.4481,10,540.6654,158.7677,802.8963,158.7677,1200.1566,54.9183,1480,54.9183"); } 100% { offset-distance: 100%; } } @keyframes sliding { 0%, 100% { offset-path: path("M-520,210S-171.6634,10,141.4481,10,540.6654,158.7677,802.8963,158.7677,120.........完整代码请登录后点击上方下载按钮下载查看
网友评论0