css实现文字菜单悬浮聚焦动画效果代码-html代码-BFW代码库

css实现文字菜单悬浮聚焦动画效果代码

代码语言：html

代码描述：css实现文字菜单悬浮聚焦动画效果代码，鼠标悬浮，文字随机动画，边框出现四个角。

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro');


body {
  --clr-bg: #020617;
  background: var(--clr-bg);
  height: 100svh;
  display: grid;
  place-items: center;
  
  font-family: "Source Code Pro", sans-serif;
  color: white;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}

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

@keyframe test {
  to {
    color: blue;
  }
}

main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  
  position: relative;
  
  --gap: 1em;
  --line-height: 1.2em;
  --pos: 3;
  
  line-height: var(--line-height);
  align-items: center;
  
  
  --height: calc(var(--line-height) + var(--gap));
  --position: calc( (var(--pos) - 1) * var(--height) + var(--gap)/2);
  
  z-index:0;  
  
  --padding-x: 1em;
  --padding-y: 1em;
}

main:active {
  --padding-x: .5em;
  --padding-y: .5em;
}

main::before,
main::after {
  content: '';
  position: absolute;
  
  pointer-events: none;
  z-index: -1;
  
  --rad: .2em;
  
  --offset-pos: calc( var(--position) - var(--pad)/2);
  --pad-height: calc(var(--line-height) + var(--pad));
  --radi: calc(var(--rad) + var(--stroke-width,0px));
  
  --pad: calc(var(--padding-y) + var(--stroke-width,0px)*2);  
  
  height: var(--pad-height);
  border-radius: var(--radi);
  
  inset: calc((var(--stroke-width, 0px) + var(--padding-x)) * -1);
  bottom: unset;
  top: var(--offset-pos);
  
  transition: .1s;
  
}

main::before {
  --stroke-width: .1em;
  --over-length: 10px;
  
  opacity: var(--opacity, 0);  
  
  --clr-primary: #BADA55;
  --off-radi: calc(var(--radi) + var(--over-length));
  --circ: var(--clr-primary) var(--off-radi), transparent var(--off-radi);

  background: 
    radial-gradient(circle at left top, var(--circ)),
    radial-gradient(circle at rig.........完整代码请登录后点击上方下载按钮下载查看