导航菜单悬停高光效果

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
:root {
  --px: 0;
  --py: 0;
}

.fancy-hover {
  background: #242424;
  background: rgba(36,36,36,0.9);
  color: #FFF;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 1em 1em;
  position: relative;
  overflow: hidden;
  border-bottom: solid 1px #333;
  z-index: 2;
  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;
  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;
  transform: translate( 
    calc( var(--px) * 1px ),
    calc( var(--py) * 1px ) 
  ) translate(-50%, -50%);
  
}

.fancy-hover:after {
  background: inherit;
  margin: 2px;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  transition-delay: 0.05s;
}

.fancy-hover:hover { background-color: rgba(56,56,56,0.9); }
.fancy-hover:hover:before { opacity: 0.6; }
.fancy-hover:hover:after { opacity: 0.85; transition-delay: 0s; }

/* ////////////////////////////////////////////////////////////////////////// */

.fancy-hover--blue:hover { background-color: #24455E; }

/* ////////////////////////////////////////////////////////////////////////// */

.menu { overflow: hidden; border: solid 1px #444444; width: 15em; border-radius: 3px; opacity: 0.958; }
.menu :last-child { margin-bottom: 0; }
.fa { width: 1.25em; margin-right: 0.5em; font-size: 1.25em; text-align: center; }
html { height: 100%; display: flex; overflow: hidden; }
body { max-width: 90%; margin: auto; background: #000; }

body:before {
  content: '';
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url(https://unsplash.it/600/600?image=992); /* */
  background-size: cover;
  background-position: center center;
  z-index: -1;
  opacity: 0.9;
  margin: -7px;
  filter: blur(6px);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg