如何僅在第一次瀏覽網站時加載特定的css命令？

我只想在第一次加載網站時加載特定的css命令。我不希望加載後導航過程中加載這些集合。例如，考慮我想將這種行爲應用於這些特定的CSS代碼。如何僅在第一次瀏覽網站時加載特定的css命令？

div.navbar.navbar-inverse 
    { 
     -webkit-animation: fadeInDownx 900ms linear ; 
     animation: fadeInDownx 900ms linear; 
    } 
    a#brand 
    { 
     -webkit-animation: appear 1500ms linear ; 
     animation: appear 1500ms linear; 
    }

我想知道該怎麼做。

來源

2015-06-15 Waruna Karunathialaka

請提供更多關於您嘗試實現的內容以及您的網站的工作方式。你想延遲動畫嗎？ – hungerstar

我推薦使用javascript的onLoad（）函數 – smoggers

您可能需要在客戶端和服務器之間使用會話變量的組合（取決於您的服務器端軟件堆棧）以及Javascript或服務器端代碼來修改CSS或直接的頁面風格。原始的HTML和CSS對用戶的會話一無所知。 –

你可以把簡單的JavaScript像這樣在你的<head>部分，並觸發其上承載車身事件：

<head> 
    <script> 
     function checkIfVisited() { 
      if (!window.localStorage.visitedPreviously) { 
       document.body.className += ' first-visit'; 
      } 
      window.localStorage.visitedPreviously = true; 
     } 
    </script> 
</head> 
<body onload="checkIfVisited()"> 
    …

這將設置visitedPreviously變量並將其保存在localStorage的（這意味着它將被永久保存或直到你的腳本/用戶明確刪除它）。在此之前，腳本會檢查這個變量是否存在。

如果是，則表示腳本（即頁面）已被載入。
如果沒有，它會一類"first-visit"添加到<body>元素

然後在你的CSS藉此類考慮您的選擇：

.first-visit .navbar.navbar-inverse 
{ 
    -webkit-animation: fadeInDownx 900ms linear ; 
    animation: fadeInDownx 900ms linear; 
} 
.first-visit #brand 
{ 
    -webkit-animation: appear 1500ms linear ; 
    animation: appear 1500ms linear; 
}

這裏的工作示例：http://jsbin.com/nutece/edit?html,css

來源

2015-06-15 14:36:03

這不起作用。無論如何，我在Asp.nemt mvc5項目上這樣做。你有任何想法如何改變這種適合這種環境的代碼。 –

@WarunaKarunathialaka對不起，我在那裏有一個錯誤（只有當'body'實際已經存在時才能觸發腳本，我還提供了一個工作演示的鏈接 –

謝謝你的回答。 –

如何僅在第一次瀏覽網站時加載特定的css命令？

回答

相關問題