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

(各 Web バージョンのキーフレームもあります) 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>

編集: Web サイトで見ると、http://spencedesign.netau.net/SNL/SNL.htmlになります。これがどうにもならない理由がわかりません。そして、はい、jquery レタリングを追加しました

4

2 に答える 2

0

申し訳ありませんが、これはトピックから少し外れているかもしれません 。???

これについてもっと知りたいのですが、どこにも文書化されていないか、逆の操作があるかどうかはわかりません。私も興味があるぼかし..

信じてください、Googleが私に何かをくれたかどうか尋ねるつもりはありませんが、悲しいことに役に立たなかった、誰か知っていますか?

于 2014-11-02T01:42:42.037 に答える
0

これは、少なくともあなたが望むようにフェードインします（ただし、キャラクターごとではありません）。そのために、h2 文字の n 番目の子ごとにそれを行っているように見えるので、CSS をチェックします。「サタデー・ナイト・ライブ」では、スペースを含む各キャラクターに遅延が設定されていることを確認してください。

フィドル

.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 に答える