堆棧內存溢出
  簡體   English   中英

Codepen 片段在本地機器上不起作用

[英]Codepen snippet not working on local machine

 原文  2022-01-01 01:00:58  0   1    javascript/ html/ css/ codepen

問題描述

我修改並從 codepen 復制了一個片段到我的本地機器。 我將 css 和 js 文件與 html 文件相關聯。 但是 css 部分工作不正常。 該代碼在codepen中運行良好。

索引.html

<head>
  <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link src="https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="./styles.css" />
</head>

<body>
<menu class="menu">
  <button class="menu__item active">
     <div class="menu__icon" >
        <i class="fa-solid fa-house"></i>
     </div>
     <strong class="menu__text active">home</strong>
  </button>
  <button class="menu__item">
     <div class="menu__icon" >
        <i class="fa-solid fa-user"></i>
     </div>
     <strong class="menu__text">About</strong>
  </button>
  <button class="menu__item">
     <div class="menu__icon" >
        <i class="fa-solid fa-briefcase"></i>
     </div>
     <strong class="menu__text">
     Products</strong>
  </button>
 <button class="menu__item">
     <div class="menu__icon" >
        <i class="fa-solid fa-question"></i>
     </div>
     <strong class="menu__text">
     Concerns</strong>
  </button>
 
 <button class="menu__item">
     <div class="menu__icon" >
        <i class="fa-solid fa-blog"></i>
     </div>
     <strong class="menu__text">
     Blog</strong>
  </button>
 
  <button class="menu__item">
     <div class="menu__icon" >
        <i class="fa-solid fa-envelope"></i>
     </div>
     <strong class="menu__text">Contact</strong>
  </button>
</menu>
<script src="./index.js"></script>
</body>

styles.css

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');
html {
box-sizing: border-box ;
--duration: .45s ;
--cubic: cubic-bezier(0.4, 0, 0.2, 1) ;
--color-1: white ;
--color-2: #000 ;
--theme-bg-color:rgba(16 18 27 / 40%)
--border-color: rgba(113 119 144 / 25%);
 --theme-color: #f9fafb;
}
html *,
html *::before,
html *::after {
box-sizing: inherit ;
}
body {
margin: 0 ;
height: 20vh ;
display: flex ;
overflow: hidden ;
align-items: center ;
justify-content: center ; background: #2193b0; 
background: -webkit-linear-gradient(to left, #6dd5ed, #2193b0);  
background: linear-gradient(to left, #6dd5ed, #2193b0); 
font-family: 'Dosis', sans-serif ;
}
.menu {
margin: 0 ;
width: 45em;
display: flex ;
height: 5em ;
user-select: none ;
position: relative ;
align-items: center ;
  
    padding: 0 1.7em ;
justify-content: center ;
/* From https://css.glass */
background: rgba(245, 245, 245, 0.4);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 1em 1em 2.5em 2.5em;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
max-width: 1250px;
 max-height: 860px;
-webkit-tap-highlight-color: transparent ;
}
@media (max-width: 42.625em) {
.menu {
font-size: .55em ;
}
}
.menu__item {
all: unset ;
flex-grow: 1 ;
display: flex ;
cursor: pointer ;
overflow: hidden ;
padding-top: 0.5em ;
position: relative ;
align-items: left ;
color: var(--color-1) ;
justify-content: center ;
transition: flex-grow var(--duration) var(--cubic) ;
}
.menu__icon {
font-size: 1.5em;
stroke: currentColor ;
transition: transform var(--duration) var(--cubic) ;
}

.menu__item::after {
left: -1.15em;
bottom: 0 ;
content: " " ;
height: 0.25em ;
position: absolute ;
border-radius: 2em ;
transform-origin: left center ;
background-color: currentColor ;
width: calc( var(--lineWidth) + 5px ) ;
transform: translate3d(3em , 0, 0) scaleX(0) ;
transition: transform calc( var(--duration) + .2s) var(--cubic) ;
}
.menu__text {
left: 4.3em ;
height: 1.5em;
font-size: 1.25em ;
position: absolute ;
text-transform: capitalize ;
letter-spacing: .01em ;
transform: translate3d(0, 109%, 0) ;
transition: transform calc( var(--duration) / 3.7 ) ;
}
.menu__item.active {
flex-grow: 2.3 ;
color: var(--color-2) ;
}
.menu__item.active .menu__icon {
transform: translate3d(-95% , 0, 0) ;
}
.menu__item.active::before {
transform: scale(1) ;
}
.menu__item.active::after {
transform: translate3d(6.3em , 0, 0) scaleX(1) ;
transition: transform var(--duration) var(--cubic) ;
}
.menu__text.active {
transform: translate3d(0 , 0, 0) ;
transition: transform calc(var(--duration) / 1.5) ;
}
.icon {
--duration-icon: 1s ;
fill: none ; 
width: 2.5em ;
height: 2.5em ;
display: block ;
stroke-width: 15 ;
stroke-miterlimit: 10 ;
}
.active #home-anm {
animation: home var(--duration-icon) ;
}
@keyframes home {
25% {
transform: translate3d(0, -.8em , 0) ;
}
50% {
transform: translate3d(0, .5em , 0) ;
}
}
#strategy-anm {
transform: scaleX(.85) ;
transform-origin: center ;
}
.active #strategy-anm {
animation: strategy var(--duration-icon) ;
}
@keyframes strategy {
50% {
transform: scaleX(1) ;
}
100%{
transform: scaleX(.85) ;
}
}
.active #strategy-cir1 {
animation: strategy-cir1 var(--duration-icon);
}
.active #strategy-cir2 {
animation: strategy-cir2 var(--duration-icon) .1s;
}
.active #strategy-cir3 {
animation: strategy-cir3 var(--duration-icon) .2s;
}
@keyframes strategy-cir1 {
50% {
transform: translate3d(-.7em,-0.7em,0);
}
100%{
transform: translate3d(0,0,0);
}
}
@keyframes strategy-cir2 {
35% {
transform: translate3d(0,-0.7em,0);
}
100%{
transform: translate3d(0,0,0);
}
}
@keyframes strategy-cir3 {
35% {
transform: translate3d(.7em,-0.7em,0);
}
100%{
transform: translate3d(0,0,0);
}
}
.active #period-anm {
transform-origin: center 100% ;
animation: period var(--duration-icon) ;
}
.active #period-cir {
transform-origin: center ;
animation: period-cir var(--duration-icon) ;
}
.active #period-line {
stroke-dasharray: 66 ;
animation: period-line calc( var(--duration-icon) / 2.5 ) reverse ;
}
@keyframes period {
35% {
transform: scaleY(.85) ;
}
60% , 70% {
transform: scaleY(1.2) ;
}
100% {
transform: scaleY(1) ;
}
}
@keyframes period-cir {
0%{
opacity: 0 ;
}
35% {
opacity: 1 ;
transform: translate3d(15%, -55%, 0) ;
}
60%{
opacity: 0 ;
transform: translate3d(-8%, -50%, 0) ;
}
}
@keyframes period-line {
100% {
stroke-dashoffset: 66 ;
}
}
.active #security-cir {
transform-box: fill-box ;
transform-origin: center ;
animation: security-cir calc( var(--duration-icon) / 1.5 ) ;
}
@keyframes security-cir {
0% {
transform: scale(0) ;
}
100% {
transform: scale(1) ;
}
}
.active #security-strok {
stroke-dasharray: 96;
animation: security-strok calc( var(--duration-icon) / 1.2 ) ;
}
@keyframes security-strok {
0% {
stroke-dashoffset: 60 ;
}
100% {
stroke-dashoffset: 230 ;
}
}
.active #settings-anm {
transform-box: fill-box ;
transform-origin: center ;
animation: settings-anm calc( var(--duration-icon) / 1.5 ) ;
}
@keyframes settings-anm {
0% {
transform: rotate(-60deg);
}
50% {
transform: rotate(60deg);
}
}

index.js

/* Intagram: @ui.tormenta*/

const buttons = document.querySelectorAll(".menu__item");
let activeButton = document.querySelector(".menu__item.active");

buttons.forEach(item => {

    const text = item.querySelector(".menu__text");
    setLineWidth(text, item);

    window.addEventListener("resize", () => {
        setLineWidth(text, item);
    })

    item.addEventListener("click", function() {
        if (this.classList.contains("active")) return;

        this.classList.add("active");
        
        if (activeButton) {
            activeButton.classList.remove("active");
            activeButton.querySelector(".menu__text").classList.remove("active");
        }
        
        handleTransition(this, text);
        activeButton = this;

    });

    
});


function setLineWidth(text, item) {
    const lineWidth = text.offsetWidth + "px";
    item.style.setProperty("--lineWidth", lineWidth);
}

function handleTransition(item, text) {

    item.addEventListener("transitionend", (e) => {

        if (e.propertyName != "flex-grow" || 
        !item.classList.contains("active")) return;

        text.classList.add("active");
        
    });

}

我把那些 css 和 js 文件放在同一個文件夾中。 當我打開 html 文件時，它沒有顯示任何字體很棒的圖標或任何文本，但它顯示了導航欄布局。 我是一個完整的初學者，任何幫助表示贊賞。

1 個解決方案

解決方案1
 0  2022-01-01 04:54:15

將 CSS 鏈接的目錄路徑更改為“foldername/styles.css”對我有用。

至於 Font Awesome，它看起來不像您已導入它。 Go 到以下鏈接以查看您的 Font Awesome 套件並在您的 HTML 文件中鏈接一個

https://fontawesome.com/kits

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 WheelNav在CodePen上不起作用，但在代碼段中 有效的Javascript代碼段無法在Codepen或jsfiddle上運行嗎？ codepen演示無法在本地瀏覽器中工作？ 在本地計算機上運行codepen項目的問題 來自codepen的這段代碼不能在本地主機上運行為什么 angular.js示例在Codepen和本地環境中不起作用 代碼在 Codepen 中工作，但在瀏覽器中不工作 javascript - 地理位置無法在codepen中運行 Ajax無法在CodePen中使用 JS/jQuery 在 CodePen 中不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM