css 我的网站导航栏的动画不工作

r6hnlfcb  于 2023-04-01  发布在  其他
关注(0)|答案(1)|浏览(131)

我为我的网站找到了一个很好的动画，我想把它集成到我的网站，但它不想工作，我试图解决这个问题，因为我可以，但我不能（我仍然是一个初学者：（）因为CSS中声明了25个错误
下面是该页面的代码：

/* Demo purposes only */
var snippet = [].slice.call(document.querySelectorAll('.hover'));
if (snippet.length) {
  snippet.forEach(function(snippet) {
    snippet.addEventListener('mouseout', function(event) {
      if (event.target.parentNode.tagName === 'figure') {
        event.target.parentNode.classList.remove('hover')
      } else {
        event.target.parentNode.classList.remove('hover')
      }
    });
  });
}

function inverseMousePosition(element, event) {
  const rect = element.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  const res = {
    x1: -(x - rect.width / 2) / 20, // top left
    y1: -(y - rect.height / 2) / 20,
    x2: -(x - rect.width / 2) / 20, // top right
    y2: (y - rect.height / 2) / 20,
    x3: (x - rect.width / 2) / 20, // bottom left
    y3: -(y - rect.height / 2) / 20,
    x4: (x - rect.width / 2) / 20, // bottom right
    y4: (y - rect.height / 2) / 20
  };

  const resKey =
    "x" + (x < rect.width / 2 ? 1 : 2) + (y < rect.height / 2 ? 1 : 3);
  const tilt = res;
  return tilt !== undefined ? tilt : 0; // default to 0 if undefined
}



function handleClick(event) {
  const nav = document.querySelector('.nav');
  const target = event.target.parentNode;
  const width = target.offsetWidth;
  const {
    left
  } = target.getBoundingClientRect();
  const offsetLeft = left - nav.getBoundingClientRect().left;

  [...nav.querySelectorAll('li')].map(link => link.classList.remove('active'))
  event.target.parentNode.classList.add('active');

  nav.style.setProperty('--after-bg-position', offsetLeft);
  nav.style.setProperty('--after-radial-bg-position', (left + width / 2) - nav.getBoundingClientRect().left);
  nav.style.setProperty('--after-bg-width', width);
}

const nav = document.querySelector('.nav');

const links = nav.querySelectorAll('li a');
for (let i = 0; i < links.length; i++) {
  links[i].addEventListener('click', handleClick);
  links[i].addEventListener("mousemove", (event) => {
    const tilt = inverseMousePosition(event.target, event);

    nav.style.setProperty("--tilt-bg-y", tilt.x1 * 2); // tone down the movement a bit
    nav.style.setProperty("--tilt-bg-x", tilt.y1 * 2); // tone down the movement a bit
  });
}

['DOMContentLoaded', 'resize'].map(event => window.addEventListener(event, () => {

  const {
    width,
    left
  } = links[0].parentNode.getBoundingClientRect();
  for (let i = 0; i < links.length; i++) {
    links[i].parentNode.classList.remove('active')
  }

  links[0].parentNode.classList.add('active');

  const offsetLeft = left - nav.getBoundingClientRect().left;

  nav.style.setProperty('--after-bg-position', offsetLeft);
  nav.style.setProperty('--after-radial-bg-position', 0);
  nav.style.setProperty('--after-bg-width', width);
}));
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ccc;
}

/* Style de la barre de navigation */

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: linear-gradient(to bottom right, #8B0000, #FFA500);
  border-bottom: 2px solid #000000;
}

/* Style des icônes */

.icon-link {
  margin-left: 10px;
  margin-right: 30px;
  font-size: 25px;
}

.fa-user,
.fa-shopping-cart {
  color: rgb(0, 0, 0);
  /* Rendre les icônes noir */
}

.fa-shopping-cart:hover,
.fa-user:hover {
  /* faire changer de couleur lors de son survol */
  color: rgb(71, 71, 71);
}

/*                   ---- barre de recherche ----           */

.search-container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0.5s ease;
  /* transition fluide de la largeur */
  width: 75%;
}

.search-container input[type=text] {
  width: 450px;
  padding: 12px;
  border: none;
  border-radius: 10px 0px 0px 10px;
}

.search-container button {
  padding: 12px;
  border: none;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background: black;
  color: white;
}

.search-container button:hover {
  background: rgb(71, 71, 71);
}

.fa-search {
  border-radius: 20px;
  /* Ajouter cette propriété pour rendre l'icône de recherche arrondi */
}

@media screen and (max-width: 576px) {
  .search-container {
    width: 60%;
    /* largeur réduite pour les fenêtres plus petites */
  }
}

/*                   ---- barre de recherche ----           */

.main_title {
  text-align: center;
  margin-top: 15px;
}

#welcome {
  font-size: 24px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.img1 {
  width: 370px;
  height: 208px;
  width: 100%;
}

.imgs_home {
  text-align: center;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
.img_home {
  background-color: rgb(41, 46, 57);
  color: #fff;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  margin: 10px;
  max-width: 370px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.img_home * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.img_home:before,
.img_home:after {
  background-color: rgba(46, 52, 64, 0.5);
  border-top: 50px solid rgba(46, 52, 64, 0.5);
  border-bottom: 50px solid rgba(46, 52, 64, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 0;
}

.img_home:before {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.img_home:after {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.img_home img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.img_home figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.img_home h3 {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
}

.img_home h3 span {
  display: block;
  font-weight: 700;
}

.img_home a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.img_home:hover>img {
  opacity: 0.7;
}

.img_home:hover:before,
.img_home:hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.img_home:hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

@media screen and (max-width: 100px) {
  .img_home {
    width: 50%;
    /* largeur réduite pour les fenêtres plus petites */
  }
  .search-container {
    width: 40%;
    /* largeur réduite pour les fenêtres plus petites */
  }
}

@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"), url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations");
  font-weight: 100 1000;
}

/* 
-- Why the @layer ?
   I misuse the @layer for a good reason. 
   Since I do a lot of demo featuring #houdini
   I like to store my @property --foo {} within
   A @layer so that the viewer can simply fold the layer 
   And access to the interesting part of the CSS panel.
*/

@layer properties {
  @property --after-bg-position {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  @property --after-radial-bg-position {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  @property --after-bg-width {
    syntax: '<number>';
    inherits: true;
    initial-value: 100;
  }
  @property --after-bg-opacity {
    syntax: '<number>';
    inherits: true;
    initial-value: 20;
  }
  @property --after-shadow-offset {
    syntax: '<number>';
    inherits: true;
    initial-value: 15;
  }
  @property --after-scale {
    syntax: '<number>';
    inherits: true;
    initial-value: 0.85;
  }
  @property --li-before-opacity {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
}

:root {
  /* -- Colors: */
  --body-bg-color: hsl(221deg 16% 6%);
  /* -- Background */
  --bg-position: 0;
  /* -- misc */
  --debug: 0;
  --trs-easing: cubic-bezier(.41, -0.09, .55, 1.09);
  --trs-timing: 300ms;
  --trs-delay: 80ms;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  /* debug */
  outline: calc(var(--debug) * 1px) dashed rgb(255 0 0 / 50%);
}

.nav {
  transition: --after-bg-position var(--trs-timing) var(--trs-easing) .2s, --after-radial-bg-position var(--trs-timing) var(--trs-easing) .2s, --after-bg-width var(--trs-timing) var(--trs-easing) .2s, --after-bg-opacity var(--trs-timing) var(--trs-easing) .2s, --li-before-opacity var(--trs-timing) var(--trs-easing) .2s;
  background: var(--body-bg-color);
  border-radius: 100px;
  position: relative;
  &:before {
    content: '';
    display: block;
    position: absolute;
    width: calc(calc(var(--after-bg-width) * 1px) - 8px);
    height: 100%;
    background: rgb(255 255 255 / calc(var(--after-shadow-offset)*1%));
    border-radius: 100px;
    filter: blur(20px);
    left: 0;
    top: 0;
    transform: translateX(calc(var(--after-bg-position) * 1px)) scale(1.1);
  }
  & ul {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    height: 80px;
    border-radius: 100px;
    background-position: center center;
    background-image: radial-gradient( ellipse 150px 100px at calc(var(--after-radial-bg-position)*1px) bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 20%) 100%);
    &:active {
      --after-scale: 0.75
    }
    &:before {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      background: var(--body-bg-color);
      top: 1px;
      left: 1px;
      border-radius: 100px;
    }
    &:after {
      content: '';
      display: block;
      position: absolute;
      z-index: 1;
      width: calc(calc(var(--after-bg-width) * 1px) - 12px);
      height: calc(100% - 12px);
      background: linear-gradient(to bottom, rgb(255 255 255 / calc(calc(var(--after-bg-opacity, 0)/10)*1%)), rgb(255 255 255 / 10%));
      box-shadow: inset 0 -6px calc(var(--after-shadow-offset, 0)*1px) rgb(255 255 255 / calc(var(--after-bg-opacity)*1%));
      left: 6px;
      top: 6px;
      transform: translate(calc(var(--after-bg-position) * 1px), 0);
      border-radius: 100px 12px 12px 100px;
      transition: --after-bg-opacity var(--trs-timing) var(--trs-easing) var(--trs-delay), --after-shadow-offset var(--trs-timing) var(--trs-easing) var(--trs-delay), border-radius var(--trs-timing) var(--trs-easing) var(--trs-delay);
      pointer-events: none;
    }
    & li {
      padding: 1em;
      height: 100%;
      width: 100%;
      position: relative;
      transform-style: preserve-3d;
      perspective: 800px;
      &:not(.active):hover {
        --li-before-opacity: 0.3;
      }
      &:before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        background: rgb(255 0 0 / 0.1);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 8px;
        pointer-events: none;
        user-select: none;
        background: linear-gradient(to bottom, rgb(255 255 255 / 5%), rgb(255 255 255 / 35%));
        opacity: var(--li-before-opacity);
        transform: scale(var(--after-scale)) rotateY(calc(var(--tilt-bg-y) * 3 * -1deg)) rotateX(calc(var(--tilt-bg-x) * 3 * 1deg)) translateZ(15px);
        transition: --li-before-opacity var(--trs-timing) var(--trs-easing), --after-scale calc(var(--trs-timing)/2) var(--trs-easing) calc(var(--trs-delay)/2);
      }
      &:first-of-type:before {
        border-radius: 100px 12px 12px 100px;
      }
      &:last-of-type:before {
        border-radius: 12px 100px 100px 12px;
      }
      & a {
        display: block;
        color: inherit;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        position: relative;
        z-index: 10;
      }
    }
    /*
     &:has(li.active:hover):after {
      --after-bg-opacity: 50;
      --after-shadow-offset: 10;
    }
    */
    /* 
      Some :has() goodness to control the 
      nav:after border-radius hihihi 
    */
    &:has(li.active:first-of-type a):after {
      border-radius: 100px 12px 12px 100px;
    }
    &:has(li.active:last-of-type a):after {
      border-radius: 12px 100px 100px 12px;
    }
    &:has(li.active:nth-child(n+2):nth-child(-n+3) a):after {
      border-radius: 100px
    }
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<main>
  <header class="header">
    <div class="navbar">
      <div class="search-container">
        <input type="text" placeholder="Que voulez vous comparer...">
        <button type="submit"><i class="fa fa-search"></i></button>
      </div>
      <div class="icons-container">
        <a href="#" class="icon-link"><i class="fa fa-user"></i></a>
        <a href="#" class="icon-link"><i class="fa fa-shopping-cart"></i></a>
      </div>
    </div>
  </header>
  <nav class="nav">
    <ul>
      <li><a href="#home" id="home">Home</a></li>
      <li><a href="#project" id="project">Project</a></li>
      <li><a href="#about" id="about">About</a></li>
      <li><a href="#how" id="how">How we work</a></li>
    </ul>
  </nav>
  <div class="imgs_home">
    <figure class="img_home">
      <img class="img3" src="./Picture/pc premonter.jpg" alt="PC Premonter" />
      <figcaption>
        <h3>PC <span>Prémonter</span></h3>
      </figcaption>
      <a href="#"></a>
    </figure>
    <figure class="img_home" class="img_poupout">
      <img class="img1" src="./Picture/pc montage.jpg" alt="PC Custom" />
      <figcaption>
        <h3>PC <span>Custom</span></h3>
      </figcaption>
      <a href="#"></a>
    </figure>
    <figure class="img_home">
      <img class="img2" src="./Picture/pc portable.jpg" alt="PC Portable" />
      <figcaption>
        <h3>PC <span>Portable</span></h3>
      </figcaption>
      <a href="#"></a>
    </figure>
  </div>
</main>

以下是在css（vscode）中收到的错误：enter image description here

（我无法复制错误消息，所以我不得不截图）
先谢谢你...

css

1条答案

按热度按时间
dwbf0jvd

dwbf0jvd1#

很高兴我的问题解决了因为我把scss代码放在我的代码中，所以我在vs代码中使用了sass扩展将其转换为css文件，现在我得到了想要的结果，谢谢大家

赞(0）分享  回复(0）举报  2023-04-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com