Question

我有这个经过修改的codepen http://codepen.io/anon/pen/jPPgoY（原始版本是由Lucas Bebber制作的）我试图使用自定义css3字段使其在wordpress中工作但我认为缺少它不起作用。

1）我是否必须使用css插件导入外部文件或其他内容？第一条css行让我想到了这一点。

2）如果上述观点太多，是否有可能修改代码以便在wordpress的<div data-text="a" class="dashed-shadow">a</div> <div class="dashed-shadow">a</div>自定义字段中使用而不使用动画？

HTML

@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;
}

CSS

levels(job)
[1] "admin."        "blue-collar"   "entrepreneur"  "housemaid"    
[5] "management"    "retired"       "self-employed" "services"     
[9] "student"       "technician"    "unemployed"    "unknown"

CSS虚线文字情况

0 个答案: