split圆球压缩文字重力感应动画效果
代码语言:html
所属分类:动画
代码描述:split圆球压缩文字重力感应动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/splitting.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Heebo:wght@900&display=swap"); :root { --duration: 6s; --wave-duration: calc(var(--duration) * 0.25); --text-in-delay: calc(var(--duration) * 0.275); --text-in-duration: calc(var(--duration) * 0.1); --easing: cubic-bezier(0.5, 0, 0.5, 1); --dot-color: #ffd950; --dot-color-dark: #977a12; } *, *:before, *:after { box-sizing: border-box; position: relative; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; background: #060506; color: white; font-family: "Heebo", sans-serif; overflow: hidden; } body { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .container { display: grid; -webkit-box-align: center; align-items: center; justify-items: center; } .container > * { grid-area: 1 / 1; } .title { font-size: 10vmin; margin: 0; } .title .char { --delay: calc(var(--text-in-delay) + (0.25s * (1 - var(--distance-percent)))); -webkit-animation: text-in var(--text-in-duration) var(--easing) var(--delay) backwards; animation: text-in var(--text-in-duration) var(--easing) var(--delay) backwards; -webkit-transform-origin: center 1em; transform-origin: center 1em; } @-webkit-keyframes text-in { 0% { opacity: 0; -webkit-transform: translateX(calc(-0.4em * var(--char-offset))) scale(0); transform: translateX(calc(-0.4em * var(--char-offset))) scale(0); } 90% { -webkit-transform: translateX(0em) scale(1.1); transform: translateX(0em) scale(1.1); } } @keyframes text-in { 0% { opacity: 0; -webkit-transform: translateX(calc(-0.4em * var(--char-offset))) scale(0); transform: translateX(calc(-0.4em * var(--char-offset))) scale(0); } 90% { -webkit-transform: translateX(0em) scale(1.1); transform: translateX(0em) scale(1.1); } } .title .char[data-char="t"], .title .char[data-char="i"] { visibility: hidden; --squish-scale: 0.6; --squish-y: 10%; } .title .char[data-char="t"]:before, .title .char[data-char="i"]:before { -webkit-animation: text-squish var(--duration) var(--easing) forwards; animation: text-squish var(--duration) var(--easing) forwards; visibility: visible; -webkit-transform-origin: center 1em; transform-origin: center 1em; } .title .char[data-char="i"] { --squish-scale: 0.9; --squish-y: 5%; } @-webkit-keyframes text-squish { 47.5%, 52.5% { -webkit-transform: none; transform: none; } 50% { -webkit-transform: translateY(calc(var(--squish-y) * 1)) scaleY(calc(var(--squish-scale) * 1)); transform: translateY(calc(var(--squish-y) * 1)) scaleY(calc(var(--squish-scale) * 1)); } } @keyframes text-squish { 47.5%, 52.5% { -webkit-transform: none; transform: none; } 50% { -webkit-transform: translateY(calc(var(--squish-y) * 1)) scaleY(calc(var(--squish-scale) * 1)); transform: translateY(calc(var(--squish-y) * 1)) scaleY(calc(var(--squish-scale) * 1)); } } .title .char:last-child { -webkit-animation: text-in var(--text-in-duration) var(--easing) var(--delay) backwards, text-bonk var(--duration) var(--easing) forwards; animation: text-in var(--text-in-duration) var(--easing) var(--delay) backwards, text-bonk var(--duration) var(--easing) forwards; } @-webkit-keyframes text-bonk { 80%, 85%, to { -webkit-transform: none; transform: none; } 82% { -webkit-transform: translateX(-20%); transform: translateX(-20%); } } @keyframes text-bonk { 80%, 85%, to { -webkit-transform: none; transform: none; } 82% { -webkit-transform: translateX(-20%); transform: translateX(-20%); } } .dot { font-size: 5vmin; width: 1em; height: 1em; -webkit-animation: dot var(--duration) var(--easing) both; animation: dot var(--duration) var(--easing) both; } .dot-inner { -webkit-animation: dot-inner var(--duration) var(--easing) both; animation: dot-inner var(--duration) var(--easing) both; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; -webkit-box-align: center; align-items: center; justify-items: center; } .dot-inner > * { grid-area: 1 / 1; } .dot-wave { width: 200%; height: 200%; fill: var(--dot-color); -webkit-animation: wave-in var(--wave-duration) var(--easing); animation: wave-in var(--wave-duration) var(--easing); --offset-x: -110%; } @-webkit-keyframes wave-in { 0% { -webkit-transform: translateY(100%) translateX(var(--offset-x)); transform: translateY(100%) translateX(var(--offset-x)); } 70% { -webkit-transform: translateY(30%) translateX(0%); transform: translateY(30%) translateX(0%); } } @keyframes wave-in { 0% { -webkit-transform: translateY(100%) translateX(var(--offset-x)); transform: translateY(100%) translateX(var(--offset-x)); } 70% { -webkit-transform: translateY(30%) translateX(0%); transform: translateY(30%) translateX(0%); } } .dot.........完整代码请登录后点击上方下载按钮下载查看
网友评论0