可聚焦的菜单悬浮效果-html代码-BFW代码库

可聚焦的菜单悬浮效果

代码语言：html

代码描述：可聚焦的菜单悬浮效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
:root {
  --px: 0;
  --py: 0;
}


.fancy-hover {
  background: #242424;
  background: rgba(36,36,36,0.9);
  color: #FFF;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  cursor: pointer;
  padding: 1em 1em;
  position: relative;
  overflow: hidden;
  border-bottom: solid 1px #333;
  z-index: 2;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


.fancy-hover:before,
.fancy-hover:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}

.fancy-hover:before {
  width: 160px;
  height: 120px;
  background: radial-gradient(circle at center, #FFF 0%, transparent 60%); 
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-transform: translate( 
    cal.........完整代码请登录后点击上方下载按钮下载查看