-2

由于某种原因，此动画无法正常工作。我希望它看起来像http://tympanus.net/Tutorials/TypographyEffects/index6.html我不明白为什么它不能正常工作。在不相关的说明中，我还设置了黑色背景色，因为我的背景图像有时不太好用。我不确定为什么。谢谢！代码是

body {
background-image: url('http://images.fanpop.com/images/image_uploads/SNL-Wallpaper-saturday-night-live-784022_1024_768.jpg');
background-size: cover;
background: #000;
}

.letter-container h2 a{
text-align: justify;
float: right;
margin-right: 100px;
font-size: 130px;
line-height: 160px;
display: block;
padding-bottom: 30px;
color: #fff;
cursor:default;
text-decoration: none;
}
.letter-container h2 a span {
color: #000;
opacity: 1;
text-decoration: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.9s linear backwards;   
-moz-animation: sharpen 0.9s linear backwards;  
-ms-animation: sharpen 0.9s linear backwards;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:nth-child(1) {
    animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
    animation-delay: 0.1s;
}

我只放了几个 :nth 孩子，因为我不想填满这个职位。

@keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}

（我也有每个网络版本的关键帧） html 和 Javascript 是

<div id="letter-container" class="letter-container">
    <h2><a href="#">Saturday <br/> Night <br/> Live</a></h2>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(function() {
                    $("#letter-container h2 a").lettering();
                });
            </script>

编辑：要在网站上查看它是http://spencedesign.netau.net/SNL/SNL.html我不明白这怎么做。是的，我确实添加了 jquery 字母

4

2 回答 2

0

这至少会像您想要的那样淡入淡出（但不是逐个字符）。为此，我会检查 CSS，因为看起来它正在为 h2 字母的每个 nth-child 执行此操作。确保为“周六夜现场”中的每个角色设置了延迟，包括空格。

小提琴

.letter-container h2 a span:nth-child(1) {
    animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
    animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
    animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(4) {
    animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
    animation-delay: 0.4s;
}
[...etc]
于 2012-12-04T17:00:53.183 回答
0

抱歉，这可能有点偏离主题，但谷歌为什么没有参考： 动画：向后锐化0.9s 线性；？？？

我想了解更多关于此的信息，但我无法在任何地方找到它的文档，也没有反向操作，即。模糊这也让我感兴趣..

相信我，我不会在这里问谷歌是否给了我一些东西，但遗憾的是无济于事，有人知道吗？

于 2014-11-02T01:42:42.037 回答