文章/答案/技术大牛

发布

问使用CSS的新闻提款机
EN

Stack Overflow用户

提问于 2014-11-06 07:18:39

回答 1查看 1.3K关注 0票数 1

我正试着播放一些内容，比如新闻播客(从右到左)。下面的代码适用于火狐，但在Chrome上失败(参考：[https://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>

我也试过这个，但它没有用铬。

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

javascript

html

css

css-animations

回答 1

Stack Overflow用户

发布于 2014-11-06 08:57:49

你忘了下面的链接

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26773788

复制

相似问题

问使用CSS的新闻提款机
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS的新闻提款机EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS的新闻提款机
EN