svg+css实现文字绘边动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现文字绘边动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap"); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { block-size: 100vh; display: grid; place-content: center; gap: 1rem; font-family: "Lato", sans-serif; background-color: #efefef; } .text-container { display: flex; justify-content: center; block-size: min(10rem, 23vw); min-inline-size: 22.5rem; } .text-stroke { font-size: 92px; letter-spacing: 4px; fill: none; stroke: #000; stroke-width: 2; stroke-dasharray: 100%; stroke-dashoffset: 100%; animation: textStrokeAnim 4000ms linear both; animation-iteration-count: 1; } .reset { width: max-content; margin-inline: auto; padding: 0.5em 1.25em; font-size: 1.5rem; border-radius: 1rem; border: 0; position: relative; background-color: hsl(49deg, 100%, 62%); color: #555; } .reset::after, .reset::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: all 66ms ease; } .reset::after { box-shadow: 0 0.25rem 0.5rem #0003, -0.124rem 0.5rem 0.45rem #0002; opacity: 1; } .reset::before { box-shadow: inset 0 1px 0.5px 0px #777, inset 0 -2px 0.5px 0px #fff9, inset 0 4px 10px 0px #0007, inset 0 -4px 16px 0px #fff7; opacity: 0; } .reset:focus-visible { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0