svg+css实现蓝色大气按钮点击下拉文字弹出层效果代码-html代码-BFW代码库

svg+css实现蓝色大气按钮点击下拉文字弹出层效果代码

代码语言：html

所属分类：弹出层

代码描述：svg+css实现蓝色大气按钮点击下拉文字弹出层效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
/* Root variables */
:root {
  --scene-background: #101217;
  --main-hue: 259deg;
  --btn-radius: 14px;
  --padding: 8px;
}

*,*:before,*:after {
  box-sizing: border-box;
}


[popovertarget="btn-popover"] {
  anchor-name: --anchor-el;
}

/* Reset and base styles */
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background: var(--scene-background);
  display: grid;
  place-items: center;
  font-family: sans-serif;
}

/* Custom properties */
@property --glow {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 60%;
}

@property --tsy {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --light {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 75%;
}

@property --inner-light {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 54%;
}

@property --icon-rotation {
  syntax: "<ang.........完整代码请登录后点击上方下载按钮下载查看