html - 如何仅在第一次浏览网站时加载特定的 set css 命令?

标签 html css

我只想在第一次加载网站时加载特定的 set css 命令。我不希望在加载后的导航过程中加载这些集。例如,假设我想将该行为应用于这些特定的 set 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;
    }

我想知道怎么做。

最佳答案

你可以在你的 <head> 中加入这样简单的 javascript部分并在 body 负载事件上触发它:

<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

关于html - 如何仅在第一次浏览网站时加载特定的 set css 命令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30847349/

相关文章:

javascript - 动态创建时不出现 Ondragstart 属性

html - 我如何解决 System.Collections.Generic.List 没有 ProductID 的定义或 ProductID 的方法?

javascript - React - 使用 javascript 文件在组件中设置样式

java - TreeView 展开/折叠奇怪的行为

javascript - 获取具有特定名称的cookie

javascript - 如何为网页上的每篇文章分别在网页上添加 Facebook 共享按钮

html - 宽度 100% 不会用填充包裹在父级内?

javascript - 单独解决方案中的 JavaScript 和 CSS 文件智能感知

javascript - 如何根据js中的父位置动态调整div的大小

jquery - css + Jquery 为了实现这种重叠