svg+css布局实现玻璃态磨砂按钮落地页代码-html代码-BFW代码库

svg+css布局实现玻璃态磨砂按钮落地页代码

代码语言：html

代码描述：svg+css布局实现玻璃态磨砂按钮落地页代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css?family=Manrope:700|Manrope:400');

:root {
  --text: hsl(0, 0%, 99%);
  --textDim: hsl(0, 0%, 60%);
  --background: hsl(0, 0%, 7%);
  --primary: hsl(155, 100%, 65%);
  --primaryBg: hsla(155, 100%, 65%, 1%);
  --primaryHi: hsla(155, 100%, 75%, 25%);
  --primaryFg: hsl(155, 100%, 85%);
  --secondary: hsl(156, 51%, 14%);
  --secondaryFg: hsl(156, 51%, 75%);
  --secondaryBg: hsla(156, 51%, 14%, 5%);
  --secondaryHi: hsla(156, 51%, 30%, 50%);
  --accent: hsl(155, 100%, 94%);
  --accentBg: hsla(155, 100%, 94%, 1%);
  --accentHi: hsla(155, 100%, 100%, 25%);
}

body {
  font-family: 'Manrope';
  font-weight: 400;
  background-color: var(--background);
  color: var(--text);
  padding: 0 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  color: var(--textDim);
  width: 100%;
  box-sizing: border-box;
  z-index: 9999;
}

.menu:hover {
  color: var(--text);
  cursor: pointer;
}

.sitename {
  font-weight: bold;
}

.grid {
  position: absolute;
  height: 100%;
  weight: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  z-index: -1;
}

.grid-svg {
  height: 80%;
  width: 80%;
  position: relative;
  z-index: 1;
}

.blur {
  height: 12rem;
  width: 12rem;
  background-color: var(--primary);
  filter: blur(100px);
  border-radius: 100px;
  z-index: .........完整代码请登录后点击上方下载按钮下载查看