所以我正在尝试在我的项目中设置一些动画文本，但我在 vscode 中不断收到一个错误，说"属性值预期 css(css-propertyvalueexpected) [59， 1]"在".main-title"中，我认为这会导致代码不起作用，因为它没有显示任何类似于我在浏览器中打开页面时尝试执行的操作， 它显示它就像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"希望它看起来相同。
提前致谢
您在这里遇到的问题： 代码笔上的库的外部链接未正确链接。或者您根本没有链接到它们。
当您单击 JavaSript 选项卡中的齿轮时，您会看到那里列出了外部库
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.jshttps://codepen.io/mimikos/pen/GvpJYQhttps://codepen.io/mimikos/pen/rzOOgG
您是否使用<script>标记在代码中链接到这些内容？
如果没有，你应该这样做！
然后，代码笔实际上可以通过上下文解释指向库的链接。如果在 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/背景噪音.js
- GSAP 老电影风格：https://codepen.io/mimikos/pen/rzOOgG.js 另存为 js/老电影风格.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>
你定义了一个属性(white-spacing)，但不要给它一个值(它确实需要)：
.main-title {
/* Other properties */
white-spacing:
}
此外，它不是white-spacing，而是white-space