MENU前言效果图HtmlStyle前言1、代码段使用HTML和CSS创建一个带有三种颜色按钮的方框。每个按钮在悬停时会有不同的颜色变化效果。2、代码段创建一个居中的方框里面包含三个链接按钮。每个按钮的颜色和效果由CSS变量–clr控制。悬停时按钮文字会变成白色并且背景色扩展和发光效果随着时间显现出来。这种设计使得按钮在视觉上非常引人注目。效果图Htmldivclassboxahref#style--clr:#1e9bff1e9bff/aahref#style--clr:#ff1867ff1867/aahref#style--clr:#6eff3e6eff3e/a/div1、div classbox是一个包含三个链接按钮的容器使用classbox来指定它的样式。2、a href# style--clr: #1e9bff1e9bff/a是一组链接按钮。style--clr: #1e9bff定义一个CSS变量–clr它控制链接的颜色。链接显示为按钮内容是颜色代码例如“1e9bff”。3、其他两个链接按钮类似但使用不同的颜色代码。Style*{margin:0;padding:0;box-sizing:border-box;}body{height:100vh;display:flex;justify-content:center;align-items:center;background-color:#27282c;}.box{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:68px;a{position:relative;padding:6px 8px;box-sizing:border-box;font-size:1.5em;color:var(--clr);text-decoration:none;text-transform:uppercase;text-shadow:0 0 10pxvar(--clr);letter-spacing:0.1em;border:2px solidvar(--clr);border-radius:4px;transition:0.3s;}a:hover{color:#ffffff;border:2px solid transparent;text-shadow:0 0 0var(--clr);transition:0.6s;}a::before{content:;width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--clr);border-radius:4px;z-index:-1;transform:scale(0);transition:0.3s;}a:hover::before{transform:scale(1);transition-delay:0.3s;box-shadow:0 0 8pxvar(--clr),0 0 8pxvar(--clr),0 0 8pxvar(--clr);}}*1、选择器应用于页面上的所有元素。2、margin: 0; padding: 0;取消默认的外边距和内边距使页面布局更容易控制。3、box-sizing: border-box;设置元素的宽度和高度包括内边距和边框确保元素的尺寸控制更加直观。body标签1、设置整个网页的样式。2、height: 100vh;让页面的高度占满整个视口高度。3、display: flex; justify-content: center; align-items: center;使页面内容在垂直和水平居中显示。4、background-color: #27282c;设置背景颜色为深灰色。.box1、选择器应用于包含链接的容器。2、display: flex;使用Flexbox布局使子元素(即链接)可以灵活布局。3、justify-content: center; align-items: center;使链接在容器内水平和垂直居中。4、flex-wrap: wrap;使链接在容器内根据空间自动换行。5、gap: 68px;设置链接之间的间距为68像素。a标签01、选择器应用于每个链接按钮。02、position: relative;使链接成为相对定位为后续的伪元素::before定位做准备。03、padding: 6px 8px;设置链接内部的上下内边距为6像素左右内边距为8像素。04、box-sizing: border-box;确保链接的宽度和高度包含内边距和边框。05、font-size: 1.5em;设置字体大小为1.5倍于默认字体大小。06、color: var(--clr);设置文本颜色为之前定义的–clr变量的值。07、text-decoration: none;移除链接的默认下划线。08、text-transform: uppercase;将文本转换为全大写字母。09、text-shadow: 0 0 10px var(--clr);添加一个颜色为–clr的阴影增强文字的发光效果。10、letter-spacing: 0.1em;增加字母间距为0.1em。11、border: 2px solid var(--clr);添加一个颜色为–clr的2像素边框。12、border-radius: 4px;设置4像素的圆角边框。13、transition: 0.3s;设置链接在不同状态之间过渡效果的持续时间为0.3秒。a:hover1、选择器应用于鼠标悬停在链接上的时候。2、color: #ffffff;将文字颜色变为白色。3、border: 2px solid transparent;将边框颜色变为透明。4、text-shadow: 0 0 0 var(--clr);移除文字的阴影效果。5、transition: 0.6s;设置悬停效果的过渡时间为0.6秒。a::before01、使用::before伪元素来在链接后面创建一个背景效果。02、content: ;生成一个空内容的伪元素。03、width: 100%; height: 100%;伪元素覆盖整个链接的尺寸。04、position: absolute;使伪元素绝对定位覆盖在链接后面。05、top: 0; left: 0;将伪元素定位在链接的左上角。06、background-color: var(--clr);设置背景颜色为–clr。07、border-radius: 4px;使伪元素的边角与链接的边角一致。08、z-index: -1;让伪元素位于链接文字下方。09、transform: scale(0);初始时将伪元素缩放为0使其不可见。10、transition: 0.3s;设置伪元素的过渡时间为0.3秒。a:hover::before1、当鼠标悬停在链接上时伪元素的效果会发生变化。2、transform: scale(1);将伪元素的缩放恢复为原始尺寸使其显现出来。3、transition-delay: 0.3s;延迟0.3秒后开始过渡效果形成一种逐渐展开的效果。4、box-shadow: 0 0 8px var(--clr), 0 0 8px var(--clr), 0 0 8px var(--clr);为伪元素添加多层次的阴影增强其发光效果。