Question

我找到了一个使用CSS关键帧并且希望将其合并到现有网站中的选框... ...选框正在运行，但整个邮件不会滚动。中断的地方取决于屏幕的大小，我很确定这个问题与关键帧动画有关，但我不确定。

我从这里获得了这个原始小提琴：https://jsfiddle.net/kangrian/9JHTv/

/* Marquee Effect with Pure CSS3 Animation */
.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
    -webkit-animation: marquee 50s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/* Dibawah adalah Keyframe Marquee */
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}
@-webkit-keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}

<p class="marquee">Hidup adalah Pilihan! Pintar-pintar lah dalam Memilih .. ( <a href="http://rian-nurherdian.blogspot.com">Rian Nurherdian</a> )</p>

我能看到的唯一不同的是我的版本没有为选取框指定的宽度，虽然这个问题是在有或没有宽度的情况下发生的，所以这似乎不是罪魁祸首。

我创建的版本可在此处获得： https://jsfiddle.net/6qs2g20o/1/

#marquee:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

#marquee span {
    float: left;
}

#marquee p {
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    /* Animation */
    animation: marquee 50s linear infinite;
    -webkit-animation: marquee 50s linear infinite;
}

#marquee p:hover {
    /* Animation */
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

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

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

<div id="marquee">
    <span>Latest News</span>
    <p>The El Paso Baseball Hall of Fame Board of Directors meets tomorrow Wednesday July 13 at the Wyndham Hotel starting at 5:30 PM . . . “From a Silver Past to a Golden Future – – We Honor Excellence” . . . For Tuesday July 12, our El Paso Baseball Hall of Fame continues our “Sensational 7 Roll Call” featuring 7 Inductees at a time on our scrolling marquee: Class of 1991 Honoree Frank “Herbie” Johnson the record-setting star at Bel Air High School, signed by San Francisco Giants in 1961, made his Major League debut in 1966 and he also played professionally in Japan; El Paso Baseball Hall of Fame Son/Father duo Member and Class of 2013 Honoree Frank Anthony Castillo the All District and All City player at Eastwood High School, signed with the Chicago Cubs in 1987, in his Major League debut he tossed 8 shutout innings against the Pittsburgh Pirates, pitched with the Chicago Cubs, Colorado Rockies, Detroit Tigers, Toronto Blue Jays and the 2004 World Champion Boston Red Sox and he pitched 297 games in his 13-year Major League career; Class of 2001 Honoree Frank “Conkin” Campos who played Semi-Pro baseball for over 50 years, always batted over .300 and he was a 19X Semi-Pro All Star selection and El Paso Baseball Hall of Fame Board of Directors, Brother/Brother duo Member and Class of 2010 Honoree Frank Del Toro the All District player for Jefferson High School, played collegiately at Ranger Junior College, UTEP and New Mexico Highlands, batted .327 in 56 games with the Juarez Indios in the Mexican League, won batting titles and earned MVP honors as a hitter and pitcher in the Liga Fronteriza, coached Austin High School to Area Round of playoffs, earned High School “Coach of the Year” honors and he has been inducted into 5 different Halls of Fame . . . “Thank You” for your continued support!</p>
</div>

有没有人对可能的原因有任何想法？

谢谢，
约什

Answer 1

当我正在研究这个时，我意识到我不喜欢使用关键帧，因为速度似乎取决于选框的长度，我不想每次调整关键帧时间我决定更改大帐篷...也许这一直是问题的一部分，不确定，因为我从未真正使用当前代码解决问题。

我偶然发现了一个JavaScript字幕，认为这是我项目的最佳方法。

http://jsfiddle.net/4mTMw/1333/

html看起来像：

Use subnet setting (Disable)

css看起来像：

public class MyController : ApiController
{

    private string GetUserId() {
        return User.Identity.GetUserId();
    }

    public IEnumerable<string> Get()
    {
        var userName = GetUserNameById(GetUserId());
        return new string[] { userName };
    }
}

，JavaScript看起来像：

<div class='marquee'>
    <div class='marquee-text'>
        Testing this marquee function
    </div>
</div>

关键帧选框结束过早

1 个答案: