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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0