Question

所以我试图在项目中设置一些动画文本，但是我在vscode中不断收到错误消息，说“ .main-title”中的“期望的属性值css（css-propertyvalueexpected）[59，1]”我认为这导致代码无法正常工作，原因是它未显示在浏览器中打开页面时显示的内容，就像css代码不存在

我没有尝试修复它，我在下面发布了完整的代码，因为我不确定是什么原因，而且我是初学者

<main role="main" class="main-content" id="main-content">
    <div class="titleCont">
        <h1 class="main-title" id="main-title">
            "Here, in the forest,<br><span style="padding-left:100px">dark and deep,</span><br><span style="padding-right:110px">I offer you,</span><br><span style="padding-left:-20px">eternal sleep."</span>
        </h1>
    </div>
    <canvas id="noise" class="noise"></canvas>
  <div class="vignette"></div>
</main>

.main-content {
  overflow:hidden;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;

    height: 100vh;

    background: linear-gradient(to right, rgba(36,31,31,1) 0%, rgba(36,31,31,1) 32%, rgba(74,71,70,1) 100%);
    color: #fff;
    text-align: center;
}

.vignette{
  position:absolute;
  width:100%; height:100%;
  box-shadow:inset 0px 0px 150px 20px black;
  mix-blend-mode: multiply;
  -webkit-animation: vignette-anim 3s infinite; /* Safari 4+ */
  -moz-animation:    vignette-anim 3s infinite; /* Fx 5+ */
  -o-animation:      vignette-anim 3s infinite; /* Opera 12+ */
  animation:         vignette-anim 3s infinite; /* IE 10+, Fx 29+ */
}

.noise {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    opacity: .15;
}

.line{
  position:absolute;
  height:100%; width:1px;
  opacity:0.1;
  background-color:#000;
}

.titleCont{position:relative;}

.main-title {
    padding: .3em 1em .25em;    
    font-weight: 400;
    font-size: 40px;
    color: white;
    font-family: 'Bellefair', serif;
    position:relative;
    line-height:1.3;
    white-spacing:
}

.overTitle{
    position:absolute;
    top:0;
    left:0;
}

.dot{
  width:3px;
  height:2px;
  background-color:white;
  position:absolute;
  opacity:0.3;
}


@-webkit-keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
@-moz-keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
@-o-keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}

我从此处复制粘贴代码“ https://codepen.io/mimikos/pen/QMjjzy”，希望它看起来一样。

预先感谢

Answer 1

您定义了属性（white-spacing），但不要给它提供值（期望）：< / p>

.main-title {
    /* Other properties */
    white-spacing:
}

而且，它不是white-spacing，而是white-space

Answer 2

您在这里遇到的问题： Codepen上库的外部链接未正确链接。或者您根本没有链接到它们。

在JavaSript选项卡中单击齿轮时，您会在其中看到外部库

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js
https://codepen.io/mimikos/pen/GvpJYQ
https://codepen.io/mimikos/pen/rzOOgG

您是否使用<script>标签将其链接到代码中？

如果没有，应该这样做！

然后，codepen实际上可以通过上下文解释到库的链接。如果您在JS设置中添加带有笔URL的外部笔，codepen会自动知道它应该是JS文件，并导入具有相应文件扩展名的适当文件，如此处所列：https://blog.codepen.io/documentation/api/url-extensions/

您必须自己手动执行此操作。因此，您应该添加到代码中的HTML是

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://codepen.io/mimikos/pen/GvpJYQ.js"></script>
<script src="https://codepen.io/mimikos/pen/rzOOgG.js"></script>

但是

像这样链接到外部代码非常危险。 JS代码将来可能随时更改。这可能会导致故障和/或（甚至更严重的）安全漏洞。最好下载代码并将其保存到您的网络服务器并导入这些

背景噪声：https://codepen.io/mimikos/pen/GvpJYQ.js另存为js / background-noise.js
GSAP旧电影样式：https://codepen.io/mimikos/pen/rzOOgG.js另存为js / old-movie-style.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="js/background-noise.js"></script>
<script src="js/old-movie-style.js"></script>

需要帮助修复CSS中的“预期的资产价值”（初学者/业余者）

2 个答案:

但是