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

Question

我为我的网站找到了一个很好的动画，我想把它集成到我的网站，但它不想工作，我试图解决这个问题，我可以，但我不能(我仍然是一个初学者:()因为有25个错误声明在css

这是页面的代码:

/* 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)中收到的错误:输入图片描述

(我不能复制错误信息，所以我不得不截图)

thanks in advance…

Answer 1

很好，我的问题已经解决了:因为我把scss代码在我的代码，所以我使用sass扩展在vs code转换成一个css文件，现在我得到了想要的结果，谢谢大家