svg+css实现文字剪纸镂空悬停动画交互效果代码
代码语言:html
所属分类:悬停
代码描述:svg+css实现文字剪纸镂空悬停动画交互效果代码
代码标签: svg css 文字 剪纸 镂空 悬停 动画 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Kode+Mono:wght@700&family=Nova+Mono&family=Rubik+Mono+One&display=swap"); @property --k { syntax: "<number>"; initial-value: 1; inherits: true; } * { margin: 0; } html, body { display: grid; } html { min-height: 100%; } body { background: black; color: darkorange; } div { --d: (1lh - 1ch); --o: calc(.5*var(--d)); box-sizing: border-box; place-self: start center; overflow: hidden; position: relative; margin-left: var(--o); border: solid 0 transparent; border-width: 0.5lh 0; padding-left: var(--o); width: min-content; color: #00f; font: 700 17vmin/1 kode mono, nova mono, rubik mono one, monospace; letter-spacing: calc(var(--d)); text-transform: uppercase; clip-path: inset(0 var(--o) 0 0); isolation: isolate; filter: url(#open) url(#smooth) url(#texture); transition: --k 0.35s ease-out; } div::after { position: absolute; inset: 0; background: linear-gradient(90deg, green var(--o), rgb(0%, calc(50%*(1 + (1 - var(--k)))), 0%)), linear-gradient(90deg, maroon var(--o), rgba(50%, 0%, 0%, var(--k))), linear-gradient(rgb(calc(50%*(1 + .9*(1 - var(--k)))), 0%, 0%), rgb(calc(50%*(1 - .9*(1 - var(--k)))), 0%, 0%)); background-size: 1lh 1lh; background-blend-mode: lighten, normal; mix-blend-mode: lighten; pointer-events: none; content: ""; } div:hover { --k: 0 ; } </style> </head> <body translate="no"> <svg width="0" height="0"> <filter id="open" color-interpolation-filters="sRGB" primitiveUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> <feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0" result="base"></feColorMatrix> <feColorMatrix in="SourceGraphic" values="1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 .5 0" result="grad"></feColorMatrix> <feDisplacementMap in="base" scale=".1035" xChannelSelector="G" yChannelSelector="R" y=".1" height=".8"></feDisplacementMap> <feComponentTransfer> <feFuncR type="discrete" tableValues="0"></feFuncR> <feFuncB type="discrete" tableValues="1"></feFuncB> </feComponentTransfer> <feBlend in="base" mode="lighten" result="full"></feBlend> <feComponentTransfer in="grad"> <feFuncR type="discrete" tableValues="0"></feFuncR> <feFuncA type="discrete" tableValues="1"></feFuncA> </feComponentTransfer> <feBlend in="full" mode="lighten"></feBlend> </filter> <filter id="smooth" color-interpolation-filters="sRGB"> <feColorMatrix values="1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1"></feColorMatrix> <feGaussianBlur stdDeviation="2"></feGaussianBlur> <feComponentTransfer result="text"> <feFuncR type="table" tableValues="-2 3"></feFuncR> <feFuncB type="table" tableValues="-2 3"></feFuncB>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0