svg+css布局实现玻璃态磨砂按钮落地页代码
代码语言:html
所属分类:布局界面
代码描述:svg+css布局实现玻璃态磨砂按钮落地页代码
代码标签: 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: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0