gsap+svg+MorphSVGPlugin3实现输入字符串移除重复字符串动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+svg+MorphSVGPlugin3实现输入字符串移除重复字符串动画效果代码
代码标签: gsap svg MorphSVGPlugin3 移除 重复 字符串 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&display=swap'> <style> *, *::before, *::after { box-sizing: border-box; } body { font-family: "Sniglet", cursive; width: 100vw; height: 100vh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, #af4a4c, #a44547); } svg { width: 3rem; position: absolute; transform-origin: center 75%; transform: scale(0); } input { position: absolute; width: 100vw; height: 100vh; z-index: 10; opacity: 0; } label { color: white; font-size: 2rem; position: absolute; } label span { color: transparent; position: relative; } label span:before { content: "."; position: absolute; bottom: 0; color: white; margin-left: 1px; -webkit-animation: load 2s linear infinite; animation: load 2s linear infinite; display: inline-block; } output { position: relative; width: 100vw; height: auto; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 0 4rem; } output > span { position: relative; font-size: 4rem; color: transparent; font-weight: 800; min-width: 1rem; margin: 1px; text-align: center; line-height: 1.3; -webkit-animation: enter 0.3s cubic-bezier(0.175, 0.885, 0.3, 1.2); animation: enter 0.3s cubic-bezier(0.175, 0.885, 0.3, 1.2); } output > span .ani-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; } output > span .ani-char { position: absolute; top: 0; left: 0; width: 100%; color: var(--color); transform-origin: center; -webkit-text-fill-color: var(--color); -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #672b2d; } output > span.dupe { z-index: 2; } output > span svg { position: absolute; bottom: 0; } button { position: fixed; bottom: 4rem; padding: 1rem 2rem; background-color: #99c26e; border: 2px solid black; border-radius: 4px; color: black; box-shadow: 2px 2px 0 2px black; font-size: 1.25rem; cursor: pointer; margin: 0; z-index: 10; opacity: 0; transform: translate(0, 100%); visibility: hidden; transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s 0.25s; } button.show { transform: translate(0); opacity: 1; visibility: visible; transition: opacity 0.25s ease-out, transform 0.25s ease-out; } button:hover { background-color: #8cba5c; } button:active { box-shadow: none; transform: translate(2px, 2px); background-color: #80b24b; transition: background 0.1s, box-shadow 0.1s, transform 0.05s; } @-webkit-keyframes enter { from { transform: translateY(75%); } } @keyframes enter { from { transform: translateY(75%); } } @-webkit-keyframes load { 20% { content: "."; } 40% { content: ".."; } 80% { content: "..."; } 100% { content: "..."; } } @keyframes load { 20% { content: "."; } 40% { content: ".."; } 80% { content: "..."; } 100% { content: "..."; } } </style> </head> <body > <svg id="soot" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="eye-clip"> <circle cx="50" cy="50" r="20"></circle> </clipPath> <path id="left-leg-2" d="M40,62 q6,30 -10,5 l-2,3"></path> <path id="right-leg-2" d="M61,62 q12,25 -10,10 l-3,3"></path> </defs> <circle id="body" cx="50" cy="50" r="20" fill="#2a1e22" stroke="none"></circle> <line x1="50" y1="40" x2="50" y2="23.989401186878332" stroke="#221c1e" stroke-width="1" transform="rotate(0.03876166569026607, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="24.791055100074274" stroke="#221c1e" stroke-width="1" transform="rotate(13.568925736953418, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="24.39081949636766" stroke="#221c1e" stroke-width="1" transform="rotate(24.330306645100634, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="23.182971941203657" stroke="#221c1e" stroke-width="1" transform="rotate(37.88661779515023, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="24.883033756708855" stroke="#221c1e" stroke-width="1" transform="rotate(49.16932841793358, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="23.14485616314351" stroke="#221c1e" stroke-width="1" transform="rotate(60.75843232683108, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="24.848554428897806" stroke="#221c1e" stroke-width="1" transform="rotate(73.6066880477498, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="22.925821901603406" stroke="#221c1e" stroke-width="1" transform="rotate(84.70021645657683, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="23.81177190147152" stroke="#221c1e" stroke-width="1" transform="rotate(96.8373730792509, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="22.020554590124927" stroke="#221c1e" stroke-width="1" transform="rotate(108.38624342816034, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="23.878150120517034" stroke="#221c1e" stroke-width="1" transform="rotate(120.87438133979025, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="22.43440677986289" stroke="#221c1e" stroke-width="1" transform="rotate(133.20902179079684, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="23.275741965814937" stroke="#221c1e" stroke-width="1" transform="rotate(145.5606024383062, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="22.27045656586011" stroke="#221c1e" stroke-width="1" transform="rotate(157.68490195380693, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="24.3348166114317" stroke="#221c1e" stroke-width="1" transform="rotate(169.39053844216124, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="25.848417198030305" stroke="#221c1e" stroke-width="1" transform="rotate(180.87592320859855, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="24.51047141659287" stroke="#221c1e" stroke-width="1" transform="rotate(192.58506097862482, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="24.551636355045982" stroke="#221c1e" stroke-width="1" transform="rotate(205.35291964235253, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="24.73725015167583" stroke="#221c1e" stroke-width="1" transform="rotate(216.40241508326, 50, 50)"></line> <line x1="50" y1="40" x2="50" y2="23.38771189095334" stroke="#221c1e" stroke-width="1" transform="rotate(229.45874901294314, 50, 50)"></line> <line x1=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0