div+css实现炫酷带动画的下拉菜单导航条代码

代码语言:html

所属分类:菜单导航

代码描述:div+css实现炫酷带动画的下拉菜单导航条代码

代码标签: div css 炫酷 动画 下拉 菜单 导航条 代码

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

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

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

  
  
<style>
:root {
	--page-bkg: #1f1f1f;
	--dropdown-bkg: #111315;
	--dropdown-main-item-bkg: #272b30;
	--accent-color: #2d68ff;

	--text-color: #fff;
	--font-size: 1rem;
	--field: 0.5rem;

	--item-opacity: 0.4;

	--time: 0.2s;
}

@property --gradient-angle {
	syntax: "<angle>";
	initial-value: -225deg;
	inherits: false;
}

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

html {
	color-scheme: dark;
}

body {
	display: grid;
	justify-content: center;
	align-items: start;
	height: 100dvh;
	padding-block-start: 30dvh;
	font-size: var(--font.........完整代码请登录后点击上方下载按钮下载查看

网友评论0