Question

我正在尝试播放一些内容，例如新闻自动收报机（从右到左）。下面的代码适用于Firefox，但是使用chrome失败（参考：[http://jsfiddle.net/jonathansampson/XxUXD/）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style>
            /* Make it a marquee */
            .marquee {
                width: 450px;
                margin: 0 auto;
                white-space: nowrap;
                overflow: hidden;
                box-sizing: border-box;
                border: 1px green solid;
            }
            .marquee span {
                display: inline-block;
                padding-left: 100%;
                text-indent: 0;
                border: 1px red solid;
                animation: marquee 15s linear infinite;
                -webkit-animation: marquee 15s linear infinite;
            }
            .marquee span:hover {
                animation-play-state: paused;
                -webkit-animation-play-state: paused;
            }

            /* Make it move */
            @keyframes marquee {
                0%   { transform: translate(0, 0); }
                100% { transform: translate(-100%, 0); }
            }

            @-webkit-keyframes{
                0%   { text-indent: 27.5em }//
                100% { text-indent: -105em }
            }

            /* Make it pretty */
            .microsoft {
                padding-left: 1.5em;
                position: relative;
                font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
            }

            /* ::before was :before before ::before was ::before - kthx */
        </style>
    </head>
    <body>
        <p class="microsoft marquee"><span>Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</span></p>
    </body>
</html>

我也试过这个，但它不适用于chrome。

@-webkit-keyframes{
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Answer 1

您忘记了以下链接

<script src="http://leaverou.github.io/prefixfree/prefixfree.js"></script>

您的小提琴有一个外部资源

使用CSS的新闻代码

1 个答案: