10中splitting文字悬浮分离动画效果
代码语言:html
所属分类:动画
代码描述:10中splitting文字悬浮分离动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/splitting.css"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;700&display=swap"); :root { --normal: 300; --bold: 700; --duration: 250ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } html, body { height: 100%; } body { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; font-family: "Public Sans", sans-serif; font-size: 1rem; padding: 4rem 1rem; background-color: whitesmoke; } body > * + * { margin-top: 4rem; } .select-wrapper { position: relative; width: 100%; max-width: 250px; } .icon { pointer-events: none; position: absolute; top: 50%; right: 1rem; width: 0.75em; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .label { position: absolute; bottom: 100%; margin-bottom: 0.5rem; } .select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; padding: 0.75rem 1rem; cursor: pointer; outline: none; border: 2px solid lightgray; border-radius: 0.25rem; background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(whitesmoke)); background-image: linear-gradient(to bottom, white, whitesmoke); font-family: inherit; font-size: inherit; font-weight: 700; text-transform: capitalize; } .select:focus { border-color: dodgerblue; } .menu { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; font-size: 1.5rem; } .menu-link { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; padding: 1rem 1.5rem; color: black; font-variation-settings: "wght" var(--normal); text-decoration: none; } .menu-link:hover { font-variation-settings: "wght" var(--bold); } .menu-link .char { --delay: calc(var(--char-index) * 0.024s); display: -webkit-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; letter-spacing: -0.05rem; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transition: font-variation-settings var(--duration) var(--ease), opacity var(--duration) var(--ease); transition: font-variation-settings var(--duration) var(--ease), opacity var(--duration) var(--ease); } .menu-link .whitespace { width: 4px; } .menu-link .char::before { position: relative; height: 0; width: 100%; } .menu-link .char::before, .menu-link .char::after { pointer-events: none; font-variation-settings: "wght" var(--bold); } [data-animation="bold-delay"] .menu-link .char { -webkit-transition-delay: var(--delay); transition-delay: var(--delay); } [data-animation="buoy"] .menu-link:hover .char { -webkit-transition-delay: var(--delay); transition-delay: var(--delay); -webkit-animation: buoy calc(var(--duration) * 6) var(--delay) ease-in-out infinite; animation: buoy calc(var(--duration) * 6) var(--delay) ease-in-out infinite; } @-webkit-keyframes buoy { 25% { -webkit-transform: translateY(-6px) rotate(-5deg); transform: translateY(-6px) rotate(-5deg); } 50% { -webkit-transform: translateY(0px); transform: translateY(0px); } 75% { -webkit-transform: translateY(-6px) rotate(5deg); transform: translateY(-6px) rotate(5deg); } } @keyframes buoy { 25% { -webkit-transform: translateY(-6px) rotate(-5deg); transform: translateY(-6px) rotate(-5deg); } 50% { -webkit-transform: translateY(0px); transform: translateY(0px); } 75% { -webkit-transform: translateY(-6px) rotate(5deg); transform: translateY(-6px) rotate(5deg); } } [data-animation="front-flip"] .menu-link:hover .char { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: front-flip calc(var(--duration) * 6) calc(var(--char-index) * 0.02s) var(--ease) forwards; animation: front-flip calc(var(--duration) * 6) calc(var(--char-index) * 0.02s) var(--ease) forwards; } @-webkit-keyframes front-flip { 20% { -webkit-transform: translateY(0) scale(0.8); transform: translateY(0) scale(0.8); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translateY(2px) scale(0.8, 0.6); transform: translateY(2px) scale(0.8, 0.6); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 30% { -webkit-transform: translateY(-10px) scale(0.8, 1.2); transform: translateY(-10px) scale(0.8, 1.2); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 40% { -webkit-transform: translateY(-10px) scale(1, -1); transform: translateY(-10px) scale(1, -1); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translateY(6px); transform: translateY(6px); } 70% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes front-flip { 20% { -webkit-transform: translateY(0) scale(0.8); transform: translateY(0) scale(0.8); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translateY(2px) scale(0.8, 0.6); transform: translateY(2px) scale(0.8, 0.6); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 30% { -webkit-transform: translateY(-10px) scale(0.8, 1.2); transform: translateY(-10px) scale(0.8, 1.2); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 40% { -webkit-transform: translateY(-10px) scale(1, -1); transform: translateY(-10px) scale(1, -1); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translateY(6px); transform: translateY(6px); } 70% { -webkit-transform: translateY(0); transform: translateY(0); } } [data-animation="reflection-pool"] .menu-link:hover .char { -webkit-animation: reflection-pool var(--duration) calc(var(--char-index) * (var(--duration) / -2)) linear alternate infinite; animation: reflection-pool var(--duration) calc(var(--char-index) * (var(--duration) / -2)) linear alternate infinite; } @-webkit-keyframes reflection-pool { from { font-variation-settings: "wght" var(--normal); } to { font-variation-settings: "wght" var(--bold); } } @keyframes reflection-pool { from { font-variation-settings: "wght" var(--normal); } to { font-variation-settings: "wght" var(--bold); } } [data-animation="jump"] .menu-link:hover .char { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-delay: var(--delay); transition-delay: var(--delay); -webkit-animation: jump calc(var(--duration) * 3.5) calc(var(--char-index) * 0.04s) var(--ease) forwards; animation: jump calc(var(--duration) * 3.5) calc(var(--char-index) * 0.04s) var(--ease) forwards; } @-webkit-keyframes jump { 0% { -webkit-animation-timing-function: linear; animation-timing-function: linear; } 30% { -webkit-transform: translateY(2px) scaleY(0.9); transform: translateY(2px) scaleY(0.9); } 50% { -webkit-transform: translateY(-30px) scaleY(1.25); transform: translateY(-30px) scaleY(1.25); } 60% { -webkit-transform: translateY(3px) scaleY(0.75); transform: translateY(3px) sca.........完整代码请登录后点击上方下载按钮下载查看
网友评论0