注册表单点击动画效果代码
代码语言:html
所属分类:表单美化
代码描述:注册表单点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap"); @font-face { font-family: "Balloon-Base"; src: url("https://assets.codepen.io/1385231/Balloon+Base.otf"); } body { display: grid; place-items: center; height: 100vh; width: 100vw; overflow: hidden; background: #fff; } body * { box-sizing: border-box; } body.sliding #bounce input#submit { transition: opacity 0.2s ease-in-out; opacity: 0; } body.sliding #wrap { background-position: 50% 600px; box-shadow: inset 0 0 0 0 #fff; -webkit-animation: bounce2 0.5s ease-in-out 10 alternate 0.3s; animation: bounce2 0.5s ease-in-out 10 alternate 0.3s; } @-webkit-keyframes bounce2 { to { background-size: 225px 725px; } } @keyframes bounce2 { to { background-size: 225px 725px; } } body.sliding #wrap:before { transform: scale(0); } body.sliding #wrap .shark:before { transform: scaleX(1); transition-delay: 3.25s; } body.sliding #wrap .shark .inner { transform: translateY(0); transition-delay: 3.5s; } body.sliding #wrap .shark .inner:before, body.sliding #wrap .shark .inner:after { transition-delay: 0s; height: 60px; transform: translateY(0px); background: #000; } body.sliding #wrap .shark .inner:after { background: #fff; } body.sliding #fakeform:before { transition: -webkit-clip-path 0.3s ease-in-out; transition: clip-path 0.3s ease-in-out; transition: clip-path 0.3s ease-in-out, -webkit-clip-path 0.3s ease-in-out; transform: translateY(0); transition-delay: 0.3s; opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } body.sliding #fakeform p { transform: translateX(35px); } body.sliding #fakeform p > span { -webkit-animation-play-state: running; animation-play-state: running; } body.sliding #fakeform p > span:last-of-type:after { display: none; } body.sliding #fakeform p > span > span { -webkit-animation-play-state: running; animation-play-state: running; } body.sliding #fakeform p > span > span:before { -webkit-animation-play-state: running; animation-play-state: running; } body.sliding svg { transform: translateY(25px); } body.sliding svg marker path { fill: #EAB308; } body.sliding svg path#slide { d: path("M 740 620 Q 520 620 520 430 "); stroke: #fff; transform: translate(50px, -50px); transition-delay: 0.2s; } body.sliding svg path#bottom { stroke: #3B82F6; stroke-width: 120; transform: translateY(50px); transition-delay: 0.2s; transition-duration: 0.5s; } body.sliding svg path#base { stroke: #EAB308; stroke-width: 140; transform: translateY(100px); transition-delay: 0.3s; transition-duration: 0.75s; } body.sliding svg path#top, body.sliding svg path#mid { stroke: #F43F5E; d: path("M 60 130 C 90 170 90 220 90 270 L 90 470 L 710 470 L 710 270 C 710 220 710 170 740 130 "); stroke-width: 100; -webkit-animation: waving 0.35s ease-in-out 2.5 alternate forwards 0.3s; animation: waving 0.35s ease-in-out 2.5 alternate forwards 0.3s; } @-webkit-keyframes waving { to { d: path("M 120 120 C 90 170 90 220 90 270 L 90 470 L 710 470 L 710 270 C 710 220 710 170 680 120 "); } } @keyframes waving { to { d: path("M 120 120 C 90 170 90 220 90 270 L 90 470 L 710 470 L 710 270 C 710 220 710 170 680 120 "); } } body .shark { position: absolute; width: 200px; height: 200px; right: -150px; bottom: -350px; overflow: hidden; z-index: 99; } body .shark:before { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: #000; transition: 0.3s ease-in-out; transition-delay: 1.5s; z-index: 9; transform: scaleX(0); } body .shark .inner { position: absolute; width: 150px; height: 100%; left: 100px; top: 0; background: radial-gradient(ellipse at center, #fff 1px, #000 1px, #000 3px, transparent 5px) 50px 50%/10px 20px no-repeat, radial-gradient(ellipse at bottom left, #fff 45px, #fff 45px, #efefef 55px, transparent 55px) 0px 100%/100px 250px no-repeat, radial-gradient(ellipse at bottom left, transparent 45px, #ccc 45px, #ccc 75px, transparent 75px) 0px calc(100% + 2.5px)/95px 250px no-repeat; -webkit-box-reflect: left -2px; transition: 0.4s ease-in-out; transition-delay: 1s; transform: translateY(100%); } body .shark .inner:before, body .shark .inner:after { content: ""; position: absolute; width: 80px; border-radius: 40px 40px 20px 20px/50px 50px 20px 20px; background: #000; box-shadow: 0 0 0 3px #F43F5E; bottom: 20px; left: -40px; transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.005); height: 2px; transform: translateY(-35px); background: #000; } body .shark .inner:after { -webkit-clip-path: polygon(1% 33%, 15% 51%, 17% 15%, 31% 46%, 42% 6%, 47% 45%, 60% 8%, 65% 44%, 80% 14%, 81% 47%, 99% 31%, 100% 79%, 88% 75%, 84% 94%, 70% 81%, 66% 94%, 53% 81%, 44% 94%, 34% 79%, 25% 93%, 16% 79%, 8% 91%, 0% 85%, 1% 100%, 99% 100%, 99% 0%, 2% 0%); clip-path: polygon(1% 33%, 15% 51%, 17% 15%, 31% 46%, 42% 6%, 47% 45%, 60% 8%, 65% 44%, 80% 14%, 81% 47%, 99% 31%, 100% 79%, 88% 75%, 84% 94%, 70% 81%, 66% 94%, 53% 81%, 44% 94%, 34% 79%, 25% 93%, 16% 79%, 8% 91%, 0% 85%, 1% 100%, 99% 100%, 99% 0%, 2% 0%); } body svg { position: absolute; width: 1000px; height: 800px; top: calc(50% - 400px); left: calc(50% - 500px); transition: 0.5s ease-in-out; z-index: 1; } body svg marker path { stroke-width: 0; } body svg path { stroke-width: 5; fill: transparent; stroke: #000; stroke-linecap: round; stroke-linejoin: round; transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.075); stroke: #3B82F6; } body svg path#slide { stroke-width: 105; stroke-linecap: butt; } body #fakeform { height: 100%; width: 100%; position: absolute; z-index: 100; top: 0; font-family: "IBM Plex Mono", monospace; pointer-events: none; } body #fakeform:before { transform-style: preserve-3d; content: ""; width: calc(100% - 50px); left: 25px; height: 250px; background: radial-gradient(circle at bottom, transparent 53px, #F43F5E 53px, #F43F5E 60px, transparent 60px) -376px 100%/100% 450px, repeating-linear-gradient(45deg, #EAB308 5px, transparent 5px, transparent 25px, #EAB308 25px, #EAB308 30px), repeating-linear-gradient(-45deg, #EAB308 5px, transparent 5px, transparent 25px, #EAB308 25px, #EAB308 30px); position: absolute; top: -160px; z-index: 9; box-shadow: inset 0 10px 0 0 #F43F5E, inset -10px 0 0 #F43F5E, inset 10px 0 0 #F43F5E; border-radius: 10px; -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); transition: opacity 0.2s ease-in-out; opacity: 0; transform: translateY(-150px); -webkit-mask: radial-gradient(circle at bottom, transparent 53px, #000 53px) -376px 100%/100% 450px; mask: radial-gradient(circle at bottom, transparent 53px, #000 53px) -376px 100%/100% 450px; } body #fakeform p { height: 100%; position: absolute; top: -415px; left: -75px; font-size: 24px; transition: 0.2s ease-in-out; } body #fakeform p > span { width: 15px; position: absolute; offset-distance: 100%; offset-path: path("M 690 620 Q 520 620 520 430 L 80 430 "); color: transparent; -webkit-animation: slide 2s ease-in 1 forwards; animation: slide 2s ease-in 1 forwards; -webkit-animation-play-state: paused; animation-play-state: paused; transform: scaleY(-1) scaleX(-1); --height:1; --flip:0; --flipx:1; } body #fakeform p > span > span { -webkit-animation: bounce calc(0.45s * var(--height)) ease-in-out 6 alternate; animation: bounce calc(0.45s * var(--height)) ease-in-out 6 alternate; -webkit-animation-play-state: paused; animation-play-state: paused; display: inline-block; position: absolute; width: 15px; height: 15px; left: 50%; top: 50%; color: transparent; transform: translate(-50%, -50%); perspective: 500px; } body #fakeform p > span > span:before { content: attr(data-char); color: #000; position: absolute; left: 50%; top: 50%; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; transform: translate(-50%, -50%); -webkit-animation: flip calc(0.45s * var(--height)) ease-in-out 5, tumble 0.5s ease-in-out infinite; animation: flip calc(0.45s * var(--height)) ease-in-out 5, tumble 0.5s ease-in-out infinite; transform: rotate(0deg) translate(-50%, -50%); transform-style: preserve-3d; -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes tumble { from { transform-origin: -5px 50%; transform: rotate(0deg) translate(-50%, -50%); } to { transform-origin: -5px 50%; transform: rotate(360deg) translate(-50%, -50%); } } @keyframes tumble { from { transform-origin: -5px 50%; transform: rotate(0deg) translate(-50%, -50%); } to { transform-origin: -5px 50%; transform: rotate(360deg) translate(-50%, -50%); } } @-webkit-keyframes flip { 0% { transform: rotateX(0deg) rotate(0deg) translate(-50%, -50%); } 100% { transform: rotateX(calc(360deg * var(--flipx))) rotate(calc(360deg * var(--flip))) translate(-50%, -50%); } } @keyframes flip { 0% { transform: rotateX(0deg) rotate(0deg) translate(-50%, -50%); } 100% { transform: rotateX(calc(360deg * var(--flipx))) rotate(calc(360deg * var(--flip))) translate(-50%, -50%); } } body #fakeform p > span:nth-of-type(2n) { --height:1.15; } body #fakeform p > span:nth-of-type(3n) { --height:1.25; } body #fakeform p > span:nth-of-type(4n) { --height:0.75; --flip:-1; } body #fakeform p > span:nth-of-type(even) { --flip:1; --flipx:0; } body #fakeform p > span:nth-of-type(1) { offset-distance: calc(100% - 15px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.05s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.05s * var(--height))); } body #fakeform p > span:nth-of-type(1) > span { -webkit-animation-delay: calc(0.05s * var(--height)); animation-delay: calc(0.05s * var(--height)); } body #fakeform p > span:nth-of-type(1) > span:before { -webkit-animation-delay: calc(0.05s * var(--height)), calc(0.05s * var(--height) + 3s); animation-delay: calc(0.05s * var(--height)), calc(0.05s * var(--height) + 3s); } @-webkit-keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @-webkit-keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(2) { offset-distance: calc(100% - 30px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.1s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.1s * var(--height))); } body #fakeform p > span:nth-of-type(2) > span { -webkit-animation-delay: calc(0.1s * var(--height)); animation-delay: calc(0.1s * var(--height)); } body #fakeform p > span:nth-of-type(2) > span:before { -webkit-animation-delay: calc(0.1s * var(--height)), calc(0.1s * var(--height) + 3s); animation-delay: calc(0.1s * var(--height)), calc(0.1s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(3) { offset-distance: calc(100% - 45px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.15s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.15s * var(--height))); } body #fakeform p > span:nth-of-type(3) > span { -webkit-animation-delay: calc(0.15s * var(--height)); animation-delay: calc(0.15s * var(--height)); } body #fakeform p > span:nth-of-type(3) > span:before { -webkit-animation-delay: calc(0.15s * var(--height)), calc(0.15s * var(--height) + 3s); animation-delay: calc(0.15s * var(--height)), calc(0.15s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(4) { offset-distance: calc(100% - 60px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.2s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.2s * var(--height))); } body #fakeform p > span:nth-of-type(4) > span { -webkit-animation-delay: calc(0.2s * var(--height)); animation-delay: calc(0.2s * var(--height)); } body #fakeform p > span:nth-of-type(4) > span:before { -webkit-animation-delay: calc(0.2s * var(--height)), calc(0.2s * var(--height) + 3s); animation-delay: calc(0.2s * var(--height)), calc(0.2s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(5) { offset-distance: calc(100% - 75px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.25s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.25s * var(--height))); } body #fakeform p > span:nth-of-type(5) > span { -webkit-animation-delay: calc(0.25s * var(--height)); animation-delay: calc(0.25s * var(--height)); } body #fakeform p > span:nth-of-type(5) > span:before { -webkit-animation-delay: calc(0.25s * var(--height)), calc(0.25s * var(--height) + 3s); animation-delay: calc(0.25s * var(--height)), calc(0.25s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(6) { offset-distance: calc(100% - 90px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.3s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.3s * var(--height))); } body #fakeform p > span:nth-of-type(6) > span { -webkit-animation-delay: calc(0.3s * var(--height)); animation-delay: calc(0.3s * var(--height)); } body #fakeform p > span:nth-of-type(6) > span:before { -webkit-animation-delay: calc(0.3s * var(--height)), calc(0.3s * var(--height) + 3s); animation-delay: calc(0.3s * var(--height)), calc(0.3s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(7) { offset-distance: calc(100% - 105px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.35s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.35s * var(--height))); } body #fakeform p > span:nth-of-type(7) > span { -webkit-animation-delay: calc(0.35s * var(--height)); animation-delay: calc(0.35s * var(--height)); } body #fakeform p > span:nth-of-type(7) > span:before { -webkit-animation-delay: calc(0.35s * var(--height)), calc(0.35s * var(--height) + 3s); animation-delay: calc(0.35s * var(--height)), calc(0.35s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(8) { offset-distance: calc(100% - 120px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.4s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.4s * var(--height))); } body #fakeform p > span:nth-of-type(8) > span { -webkit-animation-delay: calc(0.4s * var(--height)); animation-delay: calc(0.4s * var(--height)); } body #fakeform p > span:nth-of-type(8) > span:before { -webkit-animation-delay: calc(0.4s * var(--height)), calc(0.4s * var(--height) + 3s); animation-delay: calc(0.4s * var(--height)), calc(0.4s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(9) { offset-distance: calc(100% - 135px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.45s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.45s * var(--height))); } body #fakeform p > span:nth-of-type(9) > span { -webkit-animation-delay: calc(0.45s * var(--height)); animation-delay: calc(0.45s * var(--height)); } body #fakeform p > span:nth-of-type(9) > span:before { -webkit-animation-delay: calc(0.45s * var(--height)), calc(0.45s * var(--height) + 3s); animation-delay: calc(0.45s * var(--height)), calc(0.45s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(10) { offset-distance: calc(100% - 150px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.5s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.5s * var(--height))); } body #fakeform p > span:nth-of-type(10) > span { -webkit-animation-delay: calc(0.5s * var(--height)); animation-delay: calc(0.5s * var(--height)); } body #fakeform p > span:nth-of-type(10) > span:before { -webkit-animation-delay: calc(0.5s * var(--height)), calc(0.5s * var(--height) + 3s); animation-delay: calc(0.5s * var(--height)), calc(0.5s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(11) { offset-distance: calc(100% - 165px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.55s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.55s * var(--height))); } body #fakeform p > span:nth-of-type(11) > span { -webkit-animation-delay: calc(0.55s * var(--height)); animation-delay: calc(0.55s * var(--height)); } body #fakeform p > span:nth-of-type(11) > span:before { -webkit-animation-delay: calc(0.55s * var(--height)), calc(0.55s * var(--height) + 3s); animation-delay: calc(0.55s * var(--height)), calc(0.55s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(12) { offset-distance: calc(100% - 180px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.6s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.6s * var(--height))); } body #fakeform p > span:nth-of-type(12) > span { -webkit-animation-delay: calc(0.6s * var(--height)); animation-delay: calc(0.6s * var(--height)); } body #fakeform p > span:nth-of-type(12) > span:before { -webkit-animation-delay: calc(0.6s * var(--height)), calc(0.6s * var(--height) + 3s); animation-delay: calc(0.6s * var(--height)), calc(0.6s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(13) { offset-distance: calc(100% - 195px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.65s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.65s * var(--height))); } body #fakeform p > span:nth-of-type(13) > span { -webkit-animation-delay: calc(0.65s * var(--height)); animation-delay: calc(0.65s * var(--height)); } body #fakeform p > span:nth-of-type(13) > span:before { -webkit-animation-delay: calc(0.65s * var(--height)), calc(0.65s * var(--height) + 3s); animation-delay: calc(0.65s * var(--height)), calc(0.65s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(14) { offset-distance: calc(100% - 210px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.7s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.7s * var(--height))); } body #fakeform p > span:nth-of-type(14) > span { -webkit-animation-delay: calc(0.7s * var(--height)); animation-delay: calc(0.7s * var(--height)); } body #fakeform p > span:nth-of-type(14) > span:before { -webkit-animation-delay: calc(0.7s * var(--height)), calc(0.7s * var(--height) + 3s); animation-delay: calc(0.7s * var(--height)), calc(0.7s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(15) { offset-distance: calc(100% - 225px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.75s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.75s * var(--height))); } body #fakeform p > span:nth-of-type(15) > span { -webkit-animation-delay: calc(0.75s * var(--height)); animation-delay: calc(0.75s * var(--height)); } body #fakeform p > span:nth-of-type(15) > span:before { -webkit-animation-delay: calc(0.75s * var(--height)), calc(0.75s * var(--height) + 3s); animation-delay: calc(0.75s * var(--height)), calc(0.75s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(16) { offset-distance: calc(100% - 240px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.8s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.8s * var(--height))); } body #fakeform p > span:nth-of-type(16) > span { -webkit-animation-delay: calc(0.8s * var(--height)); animation-delay: calc(0.8s * var(--height)); } body #fakeform p > span:nth-of-type(16) > span:before { -webkit-animation-delay: calc(0.8s * var(--height)), calc(0.8s * var(--height) + 3s); animation-delay: calc(0.8s * var(--height)), calc(0.8s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(17) { offset-distance: calc(100% - 255px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.85s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.85s * var(--height))); } body #fakeform p > span:nth-of-type(17) > span { -webkit-animation-delay: calc(0.85s * var(--height)); animation-delay: calc(0.85s * var(--height)); } body #fakeform p > span:nth-of-type(17) > span:before { -webkit-animation-delay: calc(0.85s * var(--height)), calc(0.85s * var(--height) + 3s); animation-delay: calc(0.85s * var(--height)), calc(0.85s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(18) { offset-distance: calc(100% - 270px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.9s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.9s * var(--height))); } body #fakeform p > span:nth-of-type(18) > span { -webkit-animation-delay: calc(0.9s * var(--height)); animation-delay: calc(0.9s * var(--height)); } body #fakeform p > span:nth-of-type(18) > span:before { -webkit-animation-delay: calc(0.9s * var(--height)), calc(0.9s * var(--height) + 3s); animation-delay: calc(0.9s * var(--height)), calc(0.9s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(19) { offset-distance: calc(100% - 285px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.95s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (0.95s * var(--height))); } body #fakeform p > span:nth-of-type(19) > span { -webkit-animation-delay: calc(0.95s * var(--height)); animation-delay: calc(0.95s * var(--height)); } body #fakeform p > span:nth-of-type(19) > span:before { -webkit-animation-delay: calc(0.95s * var(--height)), calc(0.95s * var(--height) + 3s); animation-delay: calc(0.95s * var(--height)), calc(0.95s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(20) { offset-distance: calc(100% - 300px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (1s * var(--height))); } body #fakeform p > span:nth-of-type(20) > span { -webkit-animation-delay: calc(1s * var(--height)); animation-delay: calc(1s * var(--height)); } body #fakeform p > span:nth-of-type(20) > span:before { -webkit-animation-delay: calc(1s * var(--height)), calc(1s * var(--height) + 3s); animation-delay: calc(1s * var(--height)), calc(1s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(21) { offset-distance: calc(100% - 315px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.05s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (1.05s * var(--height))); } body #fakeform p > span:nth-of-type(21) > span { -webkit-animation-delay: calc(1.05s * var(--height)); animation-delay: calc(1.05s * var(--height)); } body #fakeform p > span:nth-of-type(21) > span:before { -webkit-animation-delay: calc(1.05s * var(--height)), calc(1.05s * var(--height) + 3s); animation-delay: calc(1.05s * var(--height)), calc(1.05s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(22) { offset-distance: calc(100% - 330px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.1s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (1.1s * var(--height))); } body #fakeform p > span:nth-of-type(22) > span { -webkit-animation-delay: calc(1.1s * var(--height)); animation-delay: calc(1.1s * var(--height)); } body #fakeform p > span:nth-of-type(22) > span:before { -webkit-animation-delay: calc(1.1s * var(--height)), calc(1.1s * var(--height) + 3s); animation-delay: calc(1.1s * var(--height)), calc(1.1s * var(--height) + 3s); } @keyframes bounce { to { transform: translateY(calc(-100px * var(--height))); } } @keyframes slide { 75% { offset-distance: 0; transform: scaleY(-1) scaleX(-1); } 99.5% { offset-distance: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); opacity: 1; } 100% { offset-distance: 0; opacity: 0; transform: scaleY(-1) scaleX(-1) translateY(150px); } } body #fakeform p > span:nth-of-type(23) { offset-distance: calc(100% - 345px); -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.15s * var(--height))); animation-delay: calc(1s + 1.75s * var(--height) + (1.15s * var(--height))); } body #fakeform p > span:nth-of-type(23) > span { -webkit-animation-delay: calc(1.15s * var(--height)).........完整代码请登录后点击上方下载按钮下载查看
网友评论0