svg+css实现四种炫酷发光按钮悬浮箭头动画效果代码
代码语言:html
所属分类:悬停
代码描述:svg+css实现四种炫酷发光按钮悬浮箭头动画效果代码
代码标签: svg css 四种 炫酷 发光 按钮 悬浮 箭头 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'> <style> .container { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); background: rgb(9, 8, 25); } .card { position: relative; display: flex; justify-content: center; align-items: center; margin: 10px; background: linear-gradient(rgba(25, 31, 50, 0.2), rgb(4 8 20 / 0.01)), rgb(4 8 20 / 0.8); box-shadow: inset 0 0 0 1px rgb(200 200 220 / 0.16), inset 0 0 5px -3px var(--color), inset 0 12px 48px 0 rgb(160 220 240 / 0.08), inset 0 0 120px -100px var(--color); border-radius: 16px; color: var(--color); overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--color) 8%, transparent 8%), radial-gradient(var(--color) 8%, transparent 8%), radial-gradient(var(--color) 8%, transparent 8%), radial-gradient(var(--color) 8%, transparent 8%); background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%; background-size: 40px 40px; background-repeat: no-repeat; filter: drop-shadow(0 0 6px var(--color)); } .card::after { content: ""; position: absolute; inset: 0; background-color: var(--color); opacity: 0.2; -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, transparent, black); mask-image: radial-gradient(90% 90% at 50% 50%, transparent, black); filter: url(#noiseFilter); z-index: 1; } .button { --w: 180px; --h: 60px; --icon-size: 25px; --text-color: rgb(210 210 240); --box-glow-color: transparent; --box-glow-blur: 20px; position: relative; min-width: var(--w); min-height: var(--h); border-radius: var(--h); display: flex; justify-content: center; align-items: center; border: none; font-family: "Montserrat"; color: var(--text-color); background: rgb(4 8 20 / 0.8); box-shadow: 0 0 0 1px rgb(200 200 220 / 0.22), 0 0 var(--box-glow-blur) var(--box-glow-color), inset 0 0 26px -10px var(--box-glow-color); overflow: hidden; cursor: pointer; transition: box-shadow 500ms ease; z-index: 2; } .button::before { content: ""; position: absolute; inset: 0; background: rgb(200 200 220 / 0.1); box-shadow: inset 0 0px 24px 0 rgb(170 230 250 / 0.12); border-radius: var(--h); z-index: 1; transition: transform 500ms ease, box-shadow 500ms ease; } .text, .icon { z-index: 2; } .text { transform: translateX(-50%); font-family: "Montserrat"; transition: transform 500ms ease; } .icon { position: absolute; width: var(--icon-size); height: var(--icon-size); left: 0; transform: translateX(calc((var(--w)) / 2 + 8px)); transition: transform 500ms ease, color 500ms ease; } svg { width: 100%; height:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0