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

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

代码语言：html

代码描述：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-size);
	line-height: 1.5;
	font-family: system-ui, sans-serif;
	color: var(--text-color);
	background-color: var(--page-bkg);
}

a {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

button {
	border: none;
	color: inherit;
	font: inherit;
	background-color: transparent;
	cursor: pointer;
}

.dropdown-wrapper {
	position: relative;
	min-inline-size: calc(100% + 2rem);
	padding: var(--field);
	border-radius: 0.6rem;
	background-color: var(--dropdown-bkg);

	&::after {
		--animation-name: none;

		content: "";
		position: absolute;
		inset: -2px -2px 0 0;
		z-index: -1;
		opacity: 0;
		border-radius: inherit;
		background-image: conic-gradient(
			from var(--gradient-angle),
			transparent 50%,
			var(--accent-color),
			transparent 60%
		);
		animation-name: var(--animation-name);
		animation-duration: 0.5s;
		animation-timing-function: linear;
		animation-fill-mode: both;
		transition: opacity 0;
	}
}

.dropdown {
	display: flex;
	justify-content: space-between;
	align-items: center;
	inline-size: 100%;
	padding: var(--field);
	border-radius: inherit;
	background-color: var(--dropdown-main-item-bkg);
	transition: margin var(--time);

	&::after {
		content: "";
		inline-size: 1ch;
		aspect-ratio: 1/1;
		border-inline-end: 2px solid currentColor;
		border-block-end: 2px solid currentColor;
		rotate: 45deg;
		transition: border-color var(--time);
	}
}

.dropdown-list {
	display: grid;
	gr.........完整代码请登录后点击上方下载按钮下载查看