渐变导航（响应）

下载代码

html

css

分享到微信朋友圈

html

css

body {
  font-family: 'Roboto', sans-serif;
  color: #2c2c2c;
}
body a {
  color: inherit;
  text-decoration: none;
}

.btns {
  display: flex;
  justify-content: center;
}

.btn {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #fff;
  border: 1px solid #2c2c2c;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}
.btn:last-child {
  margin-right: 0;
}
.btn:hover, .btn.js-active {
  color: #fff;
  background-color: #2c2c2c;
}

.header {
  max-width: 500px;
  margin: 50px auto;
  text-align: center;
}

.header__title {
  font-weight: 500;
}

.content {
  max-width: 700px;
  margin: auto;
}

.content__section {
  margin-bottom: 50px;
}

.content__title {
  font-weight: 500;
  text-align: center;
}

.grad-btn--top i {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.grad-btn--bottom i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.grad-btn--left i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.grad-btn--top-left i {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.grad-btn--top-right i {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.grad-btn--bottom-left i {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.grad-btn--bottom-right i {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.nav-area {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.nav-area__item {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  padding: 40px 20px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.nav-area__item:hover {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.nav-area__item-icon {
  font-size: 25px;
}

.nav-area__item-title > p {
  margin-bottom: 0;
}

JavaScript

const nav = document.querySelector('.nav-area');
const navItems = document.querySelectorAll('.nav-area__item');

//grabbing gradient value
const gradValue = () => {

return nav.dataset.gradient;

};

//grabbing gradient direction
const gradDir = () => {

return nav.dataset.gradientDirection;

};

//building a gradient image
const buildGrad = (value, direction) => {

return `to ${direction}, ${value}`;

};

//calc background-size
const gradSize = () => {

//get number of columns
  let firstItemPosX = navItems[0].getBoundingClientRect().left;
  let cols = 1;

for (let i = 1; i < navItems.length; i++) {

if (navItems[i].getBoundingClientRect().left > firstItemPosX) {
      cols++;
    } else {
      break;
    }

}

//get number of rows
  let itemPosY = navItems[0].getBoundingClientRect().top;
  let rows = 1;

for (let i = 1; i < navItems.length; i++) {

if (navItems[i].getBoundingClientRect().top > itemPosY) {
      rows++;

itemPosY = navItems[i].getBoundingClientRect().top;
    }

}

// get size of 1 item
  const itemWidth = navItems[0].offsetWidth;
  const itemHeight = navItems[0].offsetHeight;

//get gradient size
  let gradSizeX = itemWidth * cols;
  let gradSizeY = itemHeight * rows;

return [gradSizeX, gradSizeY, cols, rows];

};

// add col and row for every item
const colRow = () => {

let row = 1;
  let col = 1;

let xItemPos = navItems[0].getBoundingClientRect().left;

//setting cols
  for (let i = 0; i < navItems.length; i++) {

if (navItems[i].getBoundingClientRect().left > xItemPos) {
      col++;
    } else {
      col = 1;
    }

navItems[i].dataset.col = col;
  }

//setting rows
  let yItemPos = navItems[0].getBoundingClientRect().top;

for (let i = 0; i < navItems.length; i++) {

if (navItems[i].getBoundingClientRect().top > yItemPos) {
      row++;

yItemPos = navItems[i].getBoundingClientRect().top;
    }

navItems[i].dataset.row = row;

}
};

//setting gradient styles
const setGrad = elem => {

//background image style
  const bgImg = `linear-gradient(${buildGrad(gradValue(), gradDir())})`;

elem.style.backgroundImage = bgImg;

//background size style
  const bgSizeX = `${gradSize()[0]}`;
  const bgSizeY = `${gradSize()[1] + 5}`;

elem.style.backgroundSize = `${bgSizeX}px ${bgSizeY}px`;

//background position style
  const bgPosX = bgSizeX * (elem.dataset.col - 1) / gradSize()[2];
  const bgPosY = bgSizeY * (elem.dataset.row - 1) / gradSize()[3];

elem.style.backgroundPosition = `${-bgPosX}px ${-bgPosY}px`;

};

//setting gradient styles function
const setGradientBg = () => {
  navItems.forEach(elem => {

colRow();

setGrad(elem);

});
};

//setting gradient onload
setGradientBg();

//recalc and set gradient on resize
window.addEventListener('resize', setGradientBg);

//rebuild grad on direction button click 
const dirBtns = document.querySelectorAll('.grad-btn');

dirBtns.forEach(elem => {

elem.addEventListener('click', () => {

//setting new direction
    const dir = elem.dataset.dir;

nav.dataset.gradientDirection = dir;

//recalc background
    setGradientBg();

//make clicked btn active
    dirBtns.forEach(elem => elem.classList.remove('js-active'));

elem.classList.add('js-active');

});

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