csss实现炫酷鼠标悬浮聚焦边框光线流动动画按钮效果代码
代码语言:html
所属分类:悬停
代码描述:csss实现炫酷鼠标悬浮聚焦边框光线流动动画按钮效果代码
代码标签: csss 炫酷 鼠标 悬浮 聚焦 边框 光线 流动 动画 按钮
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --BUTTON-fx-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; } html { height: 100%; background: radial-gradient(farthest-corner, #333, #000); } body { display: grid; place-content: center; min-height: 100%; } button { --BUTTON-color: white; --BUTTON-border-width: 1px; --BUTTON-border-radius: 12px; --BUTTON-background-image: linear-gradient( to bottom left, midnightblue, black, midnightblue ); --BUTTON-background-position: 100% 0; --BUTTON-fx-scale: 0.5; --BUTTON-fx-outset: 15px; --BUTTON-fx-inset: 0px; --BUTTON-fx-angle: 45deg; --BUTTON-fx-blur: calc(var(--BUTTON-fx-outset) / 2); --BUTTON-fx-opacity: 0.5; --BUTTON-fx-background: conic-gradient( from var(--BUTTON-fx-angle, 0deg), #0fff, #0ff8, #0ff0, #0ff8, #0fff, #0ff8, #0ff0, #0fff 80% 100% ); --BUTTON-inner-shadow-size: 1px; --BUTTON-inner-shadow: calc(sin(var(--BUTTON-fx-angle) - 90deg) * var(--BUTTON-inner-shadow-size)) calc(cos(var(--BUTTON-fx-angle) - 90deg) * var(--BUTTON-inner-shadow-size)); --BUTTON-text-shadow-size: 6px; --BUTTON-text-shadow-color: #8804; --BUTTON-text-shadow: calc(sin(var(--BUTTON-fx-angle) - 90deg) * var(--BUTTON-text-shadow-size)) calc(cos(var(--BUTTON-fx-angle) - 90deg) * var(--BUTTON-text-shadow-size)); --BUTTON-transition-duration: 600ms; position: relative; isolation: isolate; padding: 1.5em 1em; font-family: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif; font-weight: 100; font-size: clamp(1.25rem, calc(1.25rem + ((1vw - 0.2rem) * 1.875)), 2rem); text-transform: uppercase; letter-spacing: 0.125em; line-height: 1; color: var(--BUTTON-color); text-shadow: var(--BUTTON-text-shadow) 2px var(--.........完整代码请登录后点击上方下载按钮下载查看
网友评论0