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=Anton&display=swap"); @property --k { syntax: "<number>"; initial-value: 1; inherits: true; } html, body { display: grid; } html { min-height: 100%; } body { background: black; } svg { position: fixed; } div { --j: (1 - var(--k)); --d: (1lh - 1ch); --o: calc(.5*var(--d)); place-self: center; overflow: hidden; position: relative; padding: 0 0.5em; width: min-content; color: #00f; font: 700 20vmin/1 anton, sans-serif; text-indent: 0.0625em; letter-spacing: 0.125em; text-align: center; text-transform: uppercase; clip-path: inset(2px); isolation: isolate; filter: url(#open) url(#smooth) url(#texture); transition: --k 0.35s ease-out; } div::after { position: absolute; inset: 0; background: linear-gradient(green, rgb(0%, calc(50%*(1 + var(--j))), 0%)), linear-gradient(maroon, rgba(50%, 0%, 0%, var(--k))), linear-gradient(90deg, rgb(calc(50%*(1 + var(--j))), 0%, 0%), rgb(calc(50%*(1 - var(--j))), 0%, 0%)); 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"> <feColorMatrix values="0 0 0 0 .75 0 0 0 0 .75 0 0 0 0 .75 0 0 1 0 0" result="base"></feColorMatrix> <feGaussianBlur stdDeviation=".005 .02"></feGaussianBlur> <feComponentTransfer result="rond"> <feFuncA type="table" tableValues="-2 2"></feFuncA> </feComponentTransfer> <feGaussianBlur stdDeviation=".01 .04"></feGaussianBlur> <feOffset dx=".01" dy=".04"></feOffset> <feComposite in="rond" operator="out" result="insh"></feComposite> <feFlood flood-color="#ffadad"></feFlood> <feComposite in2="rond" operator="in"></feComposite> <feBlend in="insh" mode="multiply" result="lyr0"></feBlend> <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" in2="grad" scale="0.03209876543209877" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feGaussianBlur stdDeviation=".005 .02"></feGaussianBlur> <feComponentTransfer result="rnd1"> <feFuncA type="table" tableValues="-2 2"></feFuncA> </feComponentTransfer> <feFlood flood-color="#ffd6a5"></feFlood> <feComposite in2="rnd1" operator="in"></feComposite> <feBlend in2="lyr0" result="lyr1"></feBlend> <feDisplacementMap in="base" in2="grad" scale="0.06172839506172839" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feGaussianBlur stdDeviation=".005 .02"></feGaussianBlur> <feComponentTransfer result="rnd2"> <feFuncA type="table" tableValues="-2 2"></feFuncA> </feComponentTransfer> <feFlood flood-color="#fdffb6"></feFlood> <feComposite in2="rnd2" operator="in"></feComposite> <feBlend in2="lyr1" result="lyr2"></feBlend> <feDisplacement.........完整代码请登录后点击上方下载按钮下载查看
网友评论0