css+js实现聚光灯式按钮悬浮背景动画效果代码
代码语言:html
所属分类:表单美化
代码描述:css+js实现聚光灯式按钮悬浮背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"/> <style> @keyframes float { to { transform: translateY(0.75em); } } body, form { display: grid; } body { box-sizing: border-box; grid-template-rows: max-content 1fr; margin: 0; padding: 0.375em; min-height: 100vh; background: #292424; color: #ffa34c; font: clamp(.625em, 8vw, 2em)/1.25 ubuntu, trebuchet ms, sans-serif; text-align: center; text-transform: capitalize; } h3 { font-weight: 400; } form { grid-gap: 0.375em; grid-template-columns: repeat(auto-fit, 8em); place-content: center; } input[type=radio] { position: absolute; right: 100vmax; } input[type=radio] + label { --not-i: calc(1 - var(--i)); border-radius: 0.375em; box-shadow: inset 0 var(--sy, -0.375em) rgba(0, 0, 0, 0.5); background: radial-gradient(circle at var(--x, -200vw) var(--y, -200vw), rgba(255, 255, 255, calc(.5*(var(--i) + 1))) calc(var(--not-i)*3em - 1px), transparent 3em) var(--c); background-blend-mode.........完整代码请登录后点击上方下载按钮下载查看
网友评论0