html - CSS虚线文本情况

Question

我有这个修改过的codepen http://codepen.io/anon/pen/jPPgoY (原始版本由 Lucas Bebber 制作)我试图使用自定义 css 字段使其在 wordpress 中工作，但我认为缺少某些东西它不起作用。

1) 我是否必须使用 css3 插件来导入外部文件或其他东西？第一个 css 行让我想到了这一点。

2)如果上面提到的点太多了，是否有可能修改代码以便在wordpress的css自定义字段中使用时没有动画？

HTML

<div data-text="a" class="dashed-shadow">a</div> 
<div class="dashed-shadow">a</div>

CSS

@import "compass/css3";

//Variables here:
//(alongside with commented suggestions)
$foreground-color:orange;//black;
$background-color:white;//white
$shadow-color:gray;//$foreground-color;
$distance:18px;
$cut-distance:3px;//$distance/4;
$strips-size:6px; //10px nice values 4px,3px
$strips-ratio:50%;//70%
$strips-angle:45deg;//90deg;

//cray stuff yo. be sure to try (if you please)
$animate:false;//true
$fixed:false;//true

body{
  font-family: 'arial black';
  font-size:895pt;
  background-color:$background-color;
  text-align:center;
  line-height:1em;
  padding-top:5px;
}
.dashed-shadow{
  position:relative;
  top:$distance;
  left:$distance;
  display:inline-block;
  color:$shadow-color;
}
@keyframes dash-animation{
  0% {background-position:0 0};
  100% {background-position:100% 0};
}
.dashed-shadow:before{
  content:" ";
  display:block;

  position:absolute;
  $bleeding-horizontal:0px;
  $bleeding-vertical:0px;
  top:350px;
  left:-$bleeding-vertical - $distance;
  bottom:-$bleeding-horizontal + $distance;
  right:-$bleeding-horizontal + $distance;
  z-index:1;
  $color:$background-color;
  $size:$strips-ratio/2;
  $halfSize:$size/2;
  $p1:$halfSize;
  $p2:50%-$halfSize;
  $p3:50%+$halfSize;
  $p4:100%-$halfSize;
  $transparent:transparentize($color,1);
  @include background-image(linear-gradient($strips-angle,$color $p1, $transparent $p1, $transparent $p2,$color $p2, $color $p3, $transparent $p3, $transparent $p4, $color $p4));
  background-size:$strips-size $strips-size;
  @if($animate){
    animation:dash-animation 30s infinite linear; 
  }
  @if($fixed){
    background-attachment:fixed;
  }
}
.dashed-shadow:hover:before{
  animation:dash-animation 10s infinite linear;
}

.dashed-shadow:after{
  z-index:2;
  content:attr(data-text);
  position:absolute;
  left:-$distance;
  top:-$distance;
  color:$foreground-color;
  text-shadow:$cut-distance $cut-distance $background-color;
}

Answer 1

关于第1点)；您不需要任何类型的插件即可使用 codepen 中的 css 位。单击 css 窗口标题中 css 文本旁边的小齿轮，然后单击“分析 CSS”(通过 CSS Lint)。它将为您提供独立代码，您只需复制/粘贴或调整到您网站上的现有 CSS 代码即可。