Question

我的网页弄乱了我添加到该页面的一小段代码。应该创建一个小故障文本框，但它会影响整个页面。据我所知，我已经包含了所有需要用来分隔代码的<>。还有什么可能是问题？我尚未学习如何使页面引用CSS页面，因此我只是使用标记将CSS内部化了

<p data-text="PSYCHO">


PSYCHO

<style>
//@import url('https://fonts.googleapis.com/css?family=Kanit:800');
@import url('https://fonts.googleapis.com/css?family=Bungee+Shade');

:root {
  --f-size: 15;
  --f-unit: 1vmin;
  --f: calc(var(--f-size) * var(--f-unit));
  --bg: #181717; 
}

*, *::after, *::before {
  box-sizing: border-box;
}

body {
  font-family: 'Bungee Shade', cursive;//'Kanit', sans-serif;
  font-size: var(--f);

  background-color: var(--bg);
  display: flex;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
}

p {
  flex: 1;
  line-height: .75;
  margin: auto;
  color: #1af0dc;
  text-align: center;
  transform: scaleX(var(--scale, 1));
  animation: glitch-p 11s infinite alternate;

  &::before,
  &::after {
    --top: 0;        // offset from top [0 - 10]
    --left: 0;       // offset from left [0.001 - 1]
    --v-height: 30%; // visible part

    --n-tenth: calc(var(--f-size) * .1 * var(--top));
    --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
    --b-cut: calc(var(--t-cut) + var(--v-height));

    content: attr(data-text);
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;

    transform: translateX(calc(var(--left) * 100%));

    // this helps to get rid of pixelization
    filter: drop-shadow(0 0 transparent); 

    text-shadow: calc(var(--left) * -3em) 0 .02em lime, 
                 calc(var(--left) * -6em) 0 .02em #ff00e1;

    background-color: var(--bg);
    clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
  } 

  &::before {
    animation: glitch-b 1.7s infinite alternate-reverse;
  }
  &::after {
    animation: glitch-a 3.1s infinite alternate;
  }
}

@keyframes glitch-p {
  17% { --scale: .87; }
  31% { --scale: 1.1; }
  37% { --scale: 1.3; }
  47% { --scale: .91; }
  87% { --scale: 1; }
}

@keyframes glitch-a {
  10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
   --v-height: 15%; 
  }
  20% {
    --left: .005;
  }
  40% {
    --left: .01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: .03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: .07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: .083;
    --v-height: 30%;
    --top: 1;
  }
}

@keyframes glitch-b {
    10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
   --v-height: 15%; 
   --top: 10;
  }
  20% {
    --left: -.005;
  }
  40% {
    --left: -.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -.083;
    --v-height: 30%;
    --top: 1;
  }
}
</style>
</p>

Answer 1

p {
  &::before {
    ...
  }
}

是scss语法。（选择器的嵌套）。要使用scss，您将需要sass首先将scss转换为css。

如果要使用纯css格式，则需要始终指定完整标签。

p {
  ...
}

p::before {
  ...
}

Answer 2

首先，当您在页面中包含CSS代码时，必须像这样放置在文档的开头：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Page title</title>
  <style>
   /* YOUR STYLE GOES HERE */
  </style>
 </head>
 <body>
  <!-- page content -->
 </body>
</html>

然后，您可以设置<p>的样式，为它提供一个类或唯一的ID（类似于<p id="myFancyText"></p>），然后使用选择器#myFancyText在CSS代码中指向它。这样，CSS代码将仅影响您选择的元素，而不会影响所有文档。

此外，我注意到您使用的SCSS语法（&::before和类似语法）必须先转换为普通CSS才能使用。

希望这会有所帮助！

PS：要链接外部CSS文件，只需将链接放在文档的head中，指向文件即可。（请注意放置文件的文件夹的路径！）

<link rel="stylesheet" href="/path/to/style.css">

Answer 3

我看到您的代码段影响整个网页的唯一原因是，您使用的是基于元素的样式而不是基于类的样式。尝试将p { ... }换成.glitchy-p { ... }，然后为您的元素分配该类：

body {
  font-family: 'Bungee Shade', cursive;//'Kanit', sans-serif;
  font-size: var(--f);
  background-color: var(--bg);
  display: flex;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
}
.glitchy-p {
  flex: 1;
  line-height: .75;
  margin: auto;
  color: #1af0dc;
  text-align: center;
  transform: scaleX(var(--scale, 1));
  animation: glitch-p 11s infinite alternate;

  &::before,
  &::after {
    --top: 0;        // offset from top [0 - 10]
    --left: 0;       // offset from left [0.001 - 1]
    --v-height: 30%; // visible part

    --n-tenth: calc(var(--f-size) * .1 * var(--top));
    --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
    --b-cut: calc(var(--t-cut) + var(--v-height));

    content: attr(data-text);
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;

    transform: translateX(calc(var(--left) * 100%));

    // this helps to get rid of pixelization
    filter: drop-shadow(0 0 transparent); 

    text-shadow: calc(var(--left) * -3em) 0 .02em lime, 
                 calc(var(--left) * -6em) 0 .02em #ff00e1;

    background-color: var(--bg);
    clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
  } 

  &::before {
    animation: glitch-b 1.7s infinite alternate-reverse;
  }
  &::after {
    animation: glitch-a 3.1s infinite alternate;
  }
}

@keyframes glitch-p {
  17% { --scale: .87; }
  31% { --scale: 1.1; }
  37% { --scale: 1.3; }
  47% { --scale: .91; }
  87% { --scale: 1; }
}

@keyframes glitch-a {
  10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
   --v-height: 15%; 
  }
  20% {
    --left: .005;
  }
  40% {
    --left: .01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: .03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: .07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: .083;
    --v-height: 30%;
    --top: 1;
  }
}

@keyframes glitch-b {
    10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
   --v-height: 15%; 
   --top: 10;
  }
  20% {
    --left: -.005;
  }
  40% {
    --left: -.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -.083;
    --v-height: 30%;
    --top: 1;
  }
}

<p data-text="NOT PSYCHO">NOT PSYCHO</p>
<p data-text="PSYCHO" class="glitchy-p">PSYCHO</p>

这将确保只有利用类glitchy-p的元素才能收到上述样式。

Answer 4

纯CSS中的注释是/* comment */，而不是// comment

我的CSS影响了我的整个页面，而不仅仅是定义的文本

4 个答案: