CSS破文本情况

我有这个修改的codepen http://codepen.io/anon/pen/jPPgoY（原始版本是由卢卡斯Bebber制作的），我试图让它在wordpress中使用自定义css字段，但我认为缺少某些东西不起作用。CSS破文本情况

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

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

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

来源

2015-05-04 typo_78

CSS @import指令引入一个外部的css文件，所以你当然需要提供该文件，以便css按预期工作... – DrCord

感谢您的反馈，作为一个起点很好知道，那个文件应该是？ LE：我发现[this]（http://compass-style.org/reference/compass/css3/）可以成为我将继续搜索的答案的一部分。 –

不知道你发布的内容：'compass/css3' – DrCord

关于点编号1）;你不需要任何类型的插件来使用codepen中的css位。点击css窗口标题中css文本旁边的小档，然后点击“分析CSS”（通过CSS Lint）。它会为您提供独立的代码，您可以复制/粘贴或调整到您网站上现有的CSS代码。

来源

2015-05-04 15:20:22

谢谢，换句话说，如果我将代码转换为纯CSS，不使用'指南针/ sass'就足以看到动画呢？在我的情况下，所有内容仍然是http://goo.gl/F5euJr –

您需要在同一菜单中选择“Autoprefixer”选项，因此一旦编译或导出css，它将为不同浏览器添加属性定义。在你的情况下，它会为Chrome提供“-webkit-keyframes dash-animation”属性。我认为在其他浏览器中它已经正常工作。 –

就是这样！非常感谢你，现在它工作：D一切顺利， –

CSS破文本情况

回答

相关问题