利用CSS3實現圖標導航漸變背景切換特效



26 100 34



特效描述:利用CSS3實現 圖標導航 漸變背景 切換特效,利用CSS3實現圖標導航漸變背景切換特效

代碼結構

1. 引入CSS

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代碼

<!--PEN HEADER-->
<div class="header">
  <h1 class="header__title">梯度導航</h1>
</div>
<!--PEN CONTENT-->
<div class="content">
  <div class="content__section">
    <h2 class="content__title">梯度方向</h2>
    <div class="content__section-inner">
      <div class="btns">
        <button class="btn grad-btn grad-btn--top" type="button" title="to top" data-dir="top"><i class="fas fa-long-arrow-alt-right"></i></button>
        <button class="btn grad-btn grad-btn--left" type="button" title="to left" data-dir="left"><i class="fas fa-long-arrow-alt-right"></i></button>
        <button class="btn btn--sm grad-btn grad-btn--bottom" type="button" title="to bottom" data-dir="bottom"><i class="fas fa-long-arrow-alt-right"></i></button>
        <button class="btn btn--sm grad-btn" type="button" title="to right" data-dir="right"><i class="fas fa-long-arrow-alt-right"></i></button>
        <button class="btn btn--sm grad-btn grad-btn--top-left" type="button" title="to top left" data-dir="top left"><i class="fas fa-long-arrow-alt-right"></i></button>
        <button class="btn btn--sm grad-btn grad-btn--top-right js-active" type="button" title="to top right" data-dir="top right"><i class="fas fa-long-arrow-alt-right"></i></button>
        <button class="btn btn--sm grad-btn grad-btn--bottom-left" type="button" title="to bottom left" data-dir="bottom left"><i class="fas fa-long-arrow-alt-right"></i></button>
        <button class="btn btn--sm grad-btn grad-btn--bottom-right" type="button" title="to bottom right" data-dir="bottom right"><i class="fas fa-long-arrow-alt-right"></i></button>
      </div>
    </div>
  </div>
  <div class="content__section">
    <div class="content__section-inner nav-area" data-gradient="#00fff0, #5c9ff7 40%, #d322ff 80%" data-gradient-direction="right top">
      <div class="nav-area__item">
        <div class="nav-area__item-icon"><i class="fas fa-home"></i></div>
        <div class="nav-area__item-title">
          <p>網站首頁</p>
        </div>
      </div>
      <div class="nav-area__item">
        <div class="nav-area__item-icon"><i class="fas fa-user"></i></div>
        <div class="nav-area__item-title">
          <p>公司簡介</p>
        </div>
      </div>
      <div class="nav-area__item">
        <div class="nav-area__item-icon"><i class="fas fa-cog"></i></div>
        <div class="nav-area__item-title">
          <p>系統設置</p>
        </div>
      </div>
      <div class="nav-area__item">
        <div class="nav-area__item-icon"><i class="fas fa-credit-card"></i></div>
        <div class="nav-area__item-title">
          <p>付款方式</p>
        </div>
      </div>
      <div class="nav-area__item">
        <div class="nav-area__item-icon"><i class="fas fa-phone-alt"></i></div>
        <div class="nav-area__item-title">
          <p>聯系我們</p>
        </div>
      </div>
      <div class="nav-area__item">
        <div class="nav-area__item-icon"><i class="fas fa-comment"></i></div>
        <div class="nav-area__item-title">
          <p>技術支持</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
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');
  });
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動導航菜單 滾動菜單 滾動導航 滑動導航菜單 滑動導航 滑動菜單 浮動菜單 浮動導航 導航切換 菜單切換 右鍵菜單 收縮菜單 收縮導航 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 圖標導航 圖標菜單 背景切換 大圖切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 北京pk10官网开奖 时时彩360走势图大全 金博棋牌下载的网址 上海麻将清混碰安卓版 浙江快乐彩遗漏 哪个运动软件最好赚钱 香港六合彩历史开奖记录 时时彩计划稳赢版 最新福建22选5开奖结果今天 邢台麻将作弊器免费版 老撕鸡吃鸡游戏 股票行情 走势图 开甲鱼店赚钱吗 体彩福建31选7开奖结果 时时彩6码5期倍投方案 01彩票官方网站