Question

我正在尝试让https://codepen.io/alticreation/pen/ZYdopE在PHPStorm上的项目中工作，但它只能部分起作用。

主要徽标部分-笔中的 Alticreation -完全没有出现，而 Made with ....部分出现了。

这是为什么？

我在PHPStorm中将三组代码复制到了单独的HTML，CSS和Javascript文件中。

我的代码是：

window.onload = function () {

    var blue = '#2980b9';
    var l = Snap('#logo');
    var p = l.select('path');

    l.append(p);

    p.attr({
        fill: blue,
        stroke: '#0066CC',
    });

    setTimeout( function() {
        // modify this one line below, and see the result !
        var logoTitle = 'alticreation';
        var logoRandom = '';
        var logoTitleContainer = l.text(0, '98%', '');
        var possible = "-+*/|}{[]~\\\":;?/.><=+-_)(*&^%$#@!)}";
        logoTitleContainer.attr({
            fontSize: 280,
            fontFamily: 'Dosis',
            fontWeight: '600'
        });

        function generateRandomTitle(i, logoRandom) {
            setTimeout( function() {
                logoTitleContainer.attr({ text: logoRandom });
            }, i*70 );
        }

        for( var i=0; i < logoTitle.length+1; i++ ) {
            logoRandom = logoTitle.substr(0, i);
            for( var j=i; j < logoTitle.length; j++ ) {
                logoRandom += possible.charAt(Math.floor(Math.random() * possible.length));
            }
            generateRandomTitle(i, logoRandom);
            logoRandom = '';
        }

    }, 500 );

}

#container {
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<head>

    <link rel="stylesheet" style="text/css" href="words.css">

</head>
<body>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 1252 600" width="250px">
        <path fill="none" d="M531.3 11.2S520.6.5 509.5.5c-11 0-25.4 11.3-25.4 11.3L11 360s-16 12-7.4 24c8.8 12.2 25.5 1.5 25.5 1.5L499 112s6.6-4.2 10.3-4c3 .2 7.7 4 7.7 4l283 229s4 3 6 3c2.7.2 7.4-3.3 7.4-3.3l210-145.4s2.2-1.7 3.6-1.7c1 0 3.4 1.7 3.4 1.7l189.3 144.5s15.8 12.8 27.2.3c11-12-4-27-4-27l-196.7-181s-7.3-7.5-15.8-8c-8.6-.4-19.8 7.8-19.8 7.8l-196.2 122s-5.5 4-8.6 4c-2.6-.3-6.5-4-6.5-4z"/>
    </svg>
</div>

<div style="font-family:'Dosis'; font-weight:bold; color:#888; text-align:center;margin-top:20px">made with <span style="color:rgb(199, 59, 84)">&#9829;</span> by <a style="color:#999;text-decoration:none;border-bottom:1px dashed #555" href="http://www.alticreation.com/en" title="front end developer" target="_blank">alexis blondin</a></div>
</div>

</body>
</html>

Answer 1

啊，我刚刚意识到使用代码的正确方法是从Pen导出它。现在可以在我的机器上使用了。谢谢大家。

当我从Pen复制到PHPStorm时，为什么此文本动画代码不起作用？

1 个答案: