css+svg实现文字点击拆分变成导航条动画效果代码
代码语言:html
所属分类:动画
代码描述:css+svg实现文字点击拆分变成导航条动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <style> /* Transitions aren't quite as smooth on firefox */ :root { --gradient: conic-gradient( from 240deg at 50% 50%, #00ffc3, #00fad9, #00f4f0, #00eeff, #00e6ff, #00dcff, #00d2ff, #00c5ff, #00b8ff, #6da8ff, #9f97ff, #c285ff ); } * , *::before , *::after { box-sizing: border-box; font-family: "Poppins", sans-serif; } body , html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden; margin: 0; font-size: 100%; background: black; color: white; } input { display: none; } #welcomeMessage { font-size: 130%; } #welcomeMessage , #welcomeMessage figcaption , #welcomeMessage figcaption h1 , #welcomeMessage figcaption h1 b { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; } #welcomeMessage figcaption { width: auto; z-index: 1; } #welcomeMessage figcaption::before , #welcomeMessage figcaption::after { position: absolute; background: #222; width: 0%; height: 0%; content: ""; z-index: -1; } #welcomeMessage figcaption::after { background: var(--gradient); width: calc(100% + 3.1em); height: calc(100% + 3.1em); z-index: -2; } #welcomeMessage figcaption h1 { text-transform: lowercase; background: #555; box-shadow: rgba(0, 0, 0, 0.19) 0px 0.625em 1.25em, rgba(0, 0, 0, 0.23) 0px 0.375em 0.375em; transition: all 0.1s ease-in-out; } #welcomeMessage figcaption h1:active { transform: scale(0.93); transition: all 0.05s ease-in-out; } #welcomeMessage figcaption h1::before , #welcomeMessage figcaption h1::after { position: absolute; white-space: nowrap; font-size: 0.7em; font-weight: 200; transition: all 0.7s ease-in-out; } #welcomeMessage figcaption h1::before { top: -4.3em; right: 2em; content: "Click to close"; font-weight: 400; color: #666; opacity: 0; } #welcomeMessage figcaption h1::after { bottom: -3em; content: "Click to continue"; transition: all 0.3s ease-in-out; } #welcomeMessage figcaption h1 label { position: absolute; width: 100%; height: 100%; z-index: 999; } #welcomeMessage figcaption h1 label:nth-child(2) { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; right: 0; top: -3em; background: transparent; color: #666; outline: 1px solid #666; padding: 5px; opacity: 0; z-index: 998; } #welcomeMessage figcaption h1 label:hover { cursor: pointer; } #welcomeMessage figcaption h1 b { width: 2em; height: 2em; background: #555; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #welcomeMessage figcaption h1 b a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; z-index: 1; transition: all 0.35s ease-in-out; } #welcomeMessage figcaption h1 b a:focus::before { position: absolute; width: 100%; height: 100%; background: #555; border-radius: 0.3em; content:""; z-index: -1; } #welcomeMessage figcaption h1 b a:focus::after { position: absolute; width: calc(100% + 0.05em); height: calc(100% + 0.05em); background: var(--gradient); border-radius: 0.3em; content:""; z-index: -2; -webkit-animation: spinny 5s linear infinite; animation: spinny 5s linear infinite; } #welcomeMessage figcaption h1 b a:active::after { filter: blur(5px); } @-webkit-keyframes spinny { 0% { transform: rotateZ(0deg); border-radius: 0.3em; } 50% { border-radius: 1em; } 100% { transform: rotateZ(360deg); border-radius: 0.3em; } } @keyframes spinny { 0% { transform: rotateZ(0deg); border-radius: 0.3em; } 50% { border-radius: 1em; } 100% { transform: rotateZ(360deg); border-radius: 0.3em; } } #welcomeMessage figcaption h1 b a svg { position: relative; width: 55%; height: auto; fill: url(#svgGradient); filter: grayscale(100%) brightness(1.2); transform: rotateY(-180deg); transition: all 200ms linear; } #welcomeMessage figcaption h1 b a:hover svg { filter: grayscale(0%) brightness(1); transition: all 200ms ease-in-out; } #welcomeMessage figcaption h1 b a:focus svg { filter: grayscale(0%) brightness(1); transform: rotateY(-180deg) scale(0.9); transition: all 70ms linear; } #toggleOpen:checked ~ #welcomeMessage { font-size: 100%; } #toggleOpen:checked ~ #welcomeMessage figcaption::before { width: calc(100% + 3em); height: calc(100% + 3em); border-radius: 0.7em; transition: all 0.7s ease-in-out; } #toggleOpen:checked ~ #welcomeMessage figcaption::after { width: calc(100% + 6em); height: calc(100% + 6em); border-radius: 1em; transition: all 0.7s ease-in-out; } #toggleClose:checked ~ #welcomeMessage figcaption::before , #toggleClose:checked ~ #welcomeMessage figcaption::after { transition: all 0.7s ease-in-out; } #toggleOpen:checked ~ #welcomeMessage figcaption h1 { background: transparent; box-shadow: none; } #toggleOpen:checked ~ #welcomeMessage figcaption h1:active { transform: none; } #toggleClose:checked ~ #welcomeMessage figcaption h1 { background: transparent; transition: all 0.05s ease-in-out; } #toggleOpen:checked ~ #welcomeMessage figcaption h1::before { opacity: 1; transition: all 0.7s ease-in-out; } #toggleOpen:checked ~ #welcomeMessage figcaption h1::after { opacity: 0; transition: all 0.7s ease-in-out; } #toggleOpen:checked ~ #welcomeMessage figcaption h1 label:first-of-type { display: none; } #toggleOpen:checked ~ #welcomeMessage figcaption h1 label:last-of-type { z-index: 999; opacity: 1; transition: all 0.7s ease-in-out; } #toggleOpen:checked ~ #welcomeMessage figcaption h1 b { color: #555; border-radius: 0.3em; box-shadow: rgba(0, 0, 0, 0.19) 0px 0.625em 1.25em, rgba(0, 0, 0, 0.23) 0px 0.375em 0.375em; transition: all 0.35s ease-in-out; } #toggleClose:checked ~ #welcomeMessage figcaption h1 b { transition: all 0.35s ease-in-out; transition-delay: 0.35s; -webkit-animation: welcomeClose 0.7s ease-in-out 1; animation: welcomeClose 0.7s ease-in-out 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #toggleOpen:checked ~ #welcomeMessage figcaption h1 b:not(:first-of-type, :last-of-type) { -webkit-animation: welcome 0.7s ease-in-out 1; animation: welcome 0.7s ease-in-out 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #toggleOpen:checked ~ #welcomeMessage figcaption h1 b:first-of-type { -webkit-animation: welcomeFirst 0.7s ease-in-out 1; animation: welcomeFirst 0.7s ease-in-out 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #toggleOpen:checked ~ #welcomeMessage figcaption h1 b:last-of-type { -webkit-animation: welcomeLast 0.7s ease-in-out 1; animation: welcomeLast 0.7s ease-in-out 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #toggleClose:checked ~ #welcomeMessage figcaption h1 b:first-of-type { -webkit-animation: welcomeCloseFirst 0.7s ease-in-out 1; animation: welcomeCloseFirst 0.7s ease-in-out 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #toggleClose:checked ~ #welcomeMessage figcaption h1 b:last-of-type { -webkit-animation: welcomeCloseLast 0.7s ease-in-out 1; animation: welcomeCloseLast 0.7s ease-in-out 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #toggleClose:checked ~ #welcomeMessage figcaption h1 b::after { opacity: 0; transition: all 0.35s ease-in-out; } #toggleOpen:checked ~ #welcomeMessage figcaption h1 b a { opacity: 1; transition: all 0.35s ease-in-out; transition-delay: 0.35s; } @-webkit-keyframes welcome { 0% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } 20% { transform: rotateY(0deg); width: 2em; height: 2em; } 80% { transform: rotateY(180deg); width: 3em; height: 3em; } 100% { margin: 0 1.5em; transform: rotateY(180deg); width: 3em; height: 3em; } } @keyframes welcome { 0% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } 20% { transform: rotateY(0deg); width: 2em; height: 2em; } 80% { transform: rotateY(180deg); width: 3em; height: 3em; } 100% { margin: 0 1.5em; transform: rotateY(180deg); width: 3em; height: 3em; } } @-webkit-keyframes welcomeFirst { 0% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } 20% { transform: rotateY(0deg); width: 2em; height: 2em; } 80% { transform: rotateY(180deg); width: 3em; height: 3em; } 100% { margin: 0 1.5em 0 0; transform: rotateY(180deg); width: 3em; height: 3em; } } @keyframes welcomeFirst { 0% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } 20% { transform: rotateY(0deg); width: 2em; height: 2em; } 80% { transform: rotateY(180deg); width: 3em; height: 3em; } 100% { margin: 0 1.5em 0 0; transform: rotateY(180deg); width: 3em; height: 3em; } } @-webkit-keyframes welcomeLast { 0% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } 20% { transform: rotateY(0deg); width: 2em; height: 2em; } 80% { transform: rotateY(180deg); width: 3em; height: 3em; } 100% { margin: 0 0 0 1.5em; transform: rotateY(180deg); width: 3em; height: 3em; } } @keyframes welcomeLast { 0% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } 20% { transform: rotateY(0deg); width: 2em; height: 2em; } 80% { transform: rotateY(180deg); width: 3em; height: 3em; } 100% { margin: 0 0 0 1.5em; transform: rotateY(180deg); width: 3em; height: 3em; } } @-webkit-keyframes welcomeClose { 0% { margin: 0 1.5em; transform: rotateY(180deg); width: 3em; height: 3em; } 20% { transform: rotateY(180deg); width: 3em; height: 3em; } 80% { transform: rotateY(0deg); width: 2em; height: 2em; } 100% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } } @keyframes welcomeClose { 0% { margin: 0 1.5em; transform: rotateY(180deg); width: 3em; height: 3em; } 20% { transform: rotateY(180deg); width: 3em; height: 3em; } 80% { transform: rotateY(0deg); width: 2em; height: 2em; } 100% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } } @-webkit-keyframes welcomeCloseFirst { 0% { margin: 0 1.5em 0 0; transform: rotateY(180deg); width: 3em; height: 3em; } 20% { transform: rotateY(180deg); width: 3em; height: 3em; } 80% { transform: rotateY(0deg); width: 2em; height: 2em; } 100% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } } @keyframes welcomeCloseFirst { 0% { margin: 0 1.5em 0 0; transform: rotateY(180deg); width: 3em; height: 3em; } 20% { transform: rotateY(180deg); width: 3em; height: 3em; } 80% { transform: rotateY(0deg); width: 2em; height: 2em; } 100% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } } @-webkit-keyframes welcomeCloseLast { 0% { margin: 0 0 0 1.5em; transform: rotateY(180deg); width: 3em; height: 3em; } 20% { transform: rotateY(180deg); width: 3em; height: 3em; } 80% { transform: rotateY(0deg); width: 2em; height: 2em; } 100% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } } @keyframes welcomeCloseLast { 0% { margin: 0 0 0 1.5em; transform: rotateY(180deg); width: 3em; height: 3em; } 20% { transform: rotateY(180deg); width: 3em; height: 3em; } 80% { transform: rotateY(0deg); width: 2em; height: 2em; } 100% { margin: 0 0; transform: rotateY(0deg); width: 2em; height: 2em; } } @media (max-width: 1270px) { #toggleOpen:checked ~ #welcomeMessage { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0