堆栈内存溢出
  简体   繁体   English

CSS3字幕效果-陷入困境

[英]CSS3 Marquee Effect - stumped

 原文  2014-03-19 01:13:27  7   1    html/ css3/ validation/ css-animations/ marquee

问题描述

I've been through endless amounts of solutions regarding the marquee effect and I'm absolutely stumped. 我已经经历了无数种有关字幕效果的解决方案，而我对此感到非常沮丧。 I've also tried some webkit examples but event he demos don't work. 我也尝试了一些Webkit实例，但是如果他演示不起作用。 I use primarily Chrome but my website has to work in both Chrome and Firefox. 我主要使用Chrome，但是我的网站必须同时在Chrome和Firefox中运行。

http://jsfiddle.net/Birdieasm/LYZ2J/ http://jsfiddle.net/Birdieasm/LYZ2J/ 

<body>
<div id="mainCon">
<p class="style">VAULT ORIENTATION DATES</p>
<div id="mar">
<marquee width="295px" height="140px" direction="UP" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();"><p>April 14th, 2014 @ 6:00pm - Washington Vault</p>
<a href="#">Washington State Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>May 22nd, 2014 @ 6:00pm - California Vault</p>
<a href="#">Anaheim Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>June 3rd, 2014 @ 6:00pm - New York Vault</p>
<a href="#">Empire Expo Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>July 19th, 2014 @ 6:00pm - District of Columbia</p>
<a href="#">Walter E. Washington Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>August 21st, 2014 @ 6:00pm - Ohio Vault</p>
<a href="#">SeaGate Centre</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>September 30th, 2014 @ 6:00pm - Michigan Vault</p>
<a href="#">DeVos Place Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>October 10th, 2014 @ 6:00pm - Nevada Vault</p>
<a href="#">MGM Grand Hotel and Casino</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>November 12th, 2014 @ 6:00pm - Alabama Vault</p>
<a href="#">Celebration Arena</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>December 26th, 2014 @ 6:00pm - Connecticut Vault</p>
<a href="#">XL Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>Janrury 3rd, 2015 @ 6:00pm - Florida Vault</p>
<a href="#">Tampa Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>February 5th, 2015 @ 6:00pm - Illinois Vault</p>
<a href="#">Oakley-Lindsay Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>March 17th, 2015 @ 6:00pm - Indiana Vault</p>
<a href="#">Indiana Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</marquee>
</div>  
</div>
</body>

@charset "utf-8";
/* CSS Document */
#mainCon {
    width:935px;
    margin-left: auto;
    margin-right: auto;
}

#mar {
    margin-left: 5px;
    border: thin solid #000;
    width: 285px;
    height: 140px;
    background: url(../images/vaultdates.jpg);
}

marquee {
    font-size: 8.5px;
    font-family: Verdana, sans-serif;

}

marquee a {
    color:#03C;
    text-decoration:none;
}

marquee a:hover {
    font-style:italic;
}

marquee p {
    font-weight: bold;
}

I see all these marquees go left to right or right to left. 我看到所有这些字幕都是从左到右或从右到左。 I want mine to go from bottom to top. 我要我从下到上。 I've tried the webkit animation, I know very little about JavaScript and plugins so I really don't want to go down that alley. 我已经尝试过webkit动画，但我对JavaScript和插件知之甚少，所以我真的不想走这条巷子。

I've tried countless other websites. 我尝试了无数其他网站。

The only thing I've gotten close to doing is the animation property but I have very little knowledge of this property. 我唯一要做的就是animation属性，但是我对此属性了解甚少。

The bottom animation is the effect I desire but it moves way to slow and I want it to be the same speed as the effect I already created. 最下面的动画是我想要的效果，但是它会变慢，我希望它的速度与我已经创建的效果相同。 I'm struggling to recreate this effect. 我正在努力重新创建这种效果。 : http://jsfiddle.net/Birdieasm/Lam3C/ ： http ： //jsfiddle.net/Birdieasm/Lam3C/ 

<body>
    <div class="wrapper">
        <h1>Marquee with CSS3 Animation</h1>
        <h3>Move the text Downwards</h3>
        <div class="marquee down">
            <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">How to add WordPress Related Posts Without Plugins</a></p>
            <p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Automate Your Dropbox Files With Actions</a></p>
        </div>

        <h3>Move the text Upwards</h3>
        <div class="marquee up">
            <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">How to add WordPress Related Posts Without Plugins</a></p>
            <p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Automate Your Dropbox Files With Actions</a></p>
        </div>
    </div>
</body>

html {
    background: url('../images/skewed_print.png');
}
h1, h2, h3 {
    font-family: Tahoma, Arial, sans-serif;
    color: #fff;
    text-shadow: 1px 1px 0px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);
}
a {
    color: #00b1dc;
    text-decoration: none;
}
a:hover {
    color: #0097bc;
}
.wrapper {
    width: 500px;
    margin: 25px auto;  
}
.marquee {
    width: 500px;
    height: 50px;
    margin: 25px auto;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;

    background-color: #222;

    -webkit-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: inset 0px 2px 2px  rgba(0, 0, 0, .5), 0px 1px 0px  rgba(250, 250, 250, .2);
    box-shadow: inset 0px 2px 2px  rgba(0, 0, 0, .5), 0px 1px 0px  rgba(250, 250, 250, .2);

    -webkit-transition: background-color 350ms;
    -moz-transition: background-color 350ms;
    transition: background-color 350ms;
}

.marquee p {
    position: absolute;

    font-family: Tahoma, Arial, sans-serif;

    width: 100%;
    height: 100%;

    margin: 0;
    line-height: 50px;

    text-align: center;

    color: #fff;
    text-shadow: 1px 1px 0px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);

    transform:translateX(100%);
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);
}
.marquee p:nth-child(1) {
    animation: left-one 20s ease infinite;
    -moz-animation: left-one 20s ease infinite;
    -webkit-animation: left-one 20s ease infinite;
}
.marquee p:nth-child(2) {
    animation: left-two 20s ease infinite;
    -moz-animation: left-two 20s ease infinite;
    -webkit-animation: left-two 20s ease infinite;
}
.marquee.down p {
    transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
}
.marquee.down p:nth-child(1) {
    animation: down-one 20s ease infinite;
    -moz-animation: down-one 20s ease infinite;
    -webkit-animation: down-one 20s ease infinite;
}
.marquee.down p:nth-child(2) {
    animation: down-two 20s ease infinite;
    -moz-animation: down-two 20s ease infinite;
    -webkit-animation: down-two 20s ease infinite;
}
.marquee.up p { 
    transform:translateY(100%);
    -moz-transform:translateY(100%);
    -webkit-transform:translateY(100%);
}
.marquee.up p:nth-child(1) {
    animation: up-one 20s ease infinite;
    -moz-animation: up-one 20s ease infinite;
    -webkit-animation: up-one 20s ease infinite;
}
.marquee.up p:nth-child(2) {
    animation: up-two 20s ease infinite;
    -moz-animation: up-two 20s ease infinite;
    -webkit-animation: up-two 20s ease infinite;
}

/*================================
    Move the Marquee to the Left
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes left-one {
    0%  {
        -moz-transform:translateX(100%);
    }
    10% {
        -moz-transform:translateX(0);
    }
    40% {
        -moz-transform:translateX(0);
    }
    50% {
        -moz-transform:translateX(-100%);
    }
    100%{
        -moz-transform:translateX(-100%);
    }
}
@-moz-keyframes left-two {
    0% {
        -moz-transform:translateX(100%);
    }
    50% {
        -moz-transform:translateX(100%);
    }
    60% {
        -moz-transform:translateX(0);       
    }
    90% {
        -moz-transform:translateX(0);       
    }
    100%{
        -moz-transform:translateX(-100%);
    }
}
/** Webkit Keyframes **/
@-webkit-keyframes left-one {
    0% {
        -webkit-transform:translateX(100%);
    }
    10% {
        -webkit-transform:translateX(0);
    }
    40% {
        -webkit-transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-100%);
    }
    100%{
        -webkit-transform:translateX(-100%);
    }
}
@-webkit-keyframes left-two {
    0% {
        -webkit-transform:translateX(100%);
    }
    50% {
        -webkit-transform:translateX(100%);
    }
    60% {
        -webkit-transform:translateX(0);        
    }
    90% {
        -webkit-transform:translateX(0);        
    }
    100%{
        -webkit-transform:translateX(-100%);
    }
}

/*================================
    Move the Marquee Downwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes down-one {
    0%  {
        -moz-transform:translateY(-100%);
    }
    10% {
        -moz-transform:translateY(0);
    }
    40% {
        -moz-transform:translateY(0);
    }
    50% {
        -moz-transform:translateY(100%);
    }
    100%{
        -moz-transform:translateY(100%);
    }
}
@-moz-keyframes down-two {
    0% {
        -moz-transform:translateY(-100%);
    }
    50% {
        -moz-transform:translateY(-100%);
    }
    60% {
        -moz-transform:translateY(0);       
    }
    90% {
        -moz-transform:translateY(0);       
    }
    100%{
        -moz-transform:translateY(100%);
    }
}

/** Webkit Keyframes **/
@-webkit-keyframes down-one {
    0% {
        -webkit-transform:translateY(-100%);
    }
    10% {
        -webkit-transform:translateY(0);
    }
    40% {
        -webkit-transform:translateY(0);
    }
    50% {
        -webkit-transform:translateY(100%);
    }
    100%{
        -webkit-transform:translateY(100%);
    }
}
@-webkit-keyframes down-two {
    0% {
        -webkit-transform:translateY(-100%);
    }
    50% {
        -webkit-transform:translateY(-100%);
    }
    60% {
        -webkit-transform:translateY(0);        
    }
    90% {
        -webkit-transform:translateY(0);        
    }
    100%{
        -webkit-transform:translateY(100%);
    }
}

/*================================
    Move the Marquee Upwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes up-one {
    0%  {
        -moz-transform:translateY(100%);
    }
    10% {
        -moz-transform:translateY(0);
    }
    40% {
        -moz-transform:translateY(0);
    }
    50% {
        -moz-transform:translateY(-100%);
    }
    100%{
        -moz-transform:translateY(-100%);
    }
}
@-moz-keyframes up-two {
    0% {
        -moz-transform:translateY(100%);
    }
    50% {
        -moz-transform:translateY(100%);
    }
    60% {
        -moz-transform:translateY(0);       
    }
    90% {
        -moz-transform:translateY(0);       
    }
    100%{
        -moz-transform:translateY(-100%);
    }
}

/** Webkit Keyframes **/
@-webkit-keyframes up-one {
    0% {
        -webkit-transform:translateY(100%);
    }
    10% {
        -webkit-transform:translateY(0);
    }
    40% {
        -webkit-transform:translateY(0);
    }
    50% {
        -webkit-transform:translateY(-100%);
    }
    100%{
        -webkit-transform:translateY(-100%);
    }
}
@-webkit-keyframes up-two {
    0% {
        -webkit-transform:translateY(100%);
    }
    50% {
        -webkit-transform:translateY(100%);
    }
    60% {
        -webkit-transform:translateY(0);        
    }
    90% {
        -webkit-transform:translateY(0);        
    }
    100%{
        -webkit-transform:translateY(-100%);
    }
}

I need my page to validate since it's currently not. 我需要我的页面进行验证，因为当前尚未验证。 :( :(

1 个解决方案

解决方案1
 0  2015-10-02 00:09:09

Try this works perfect for me this does down but if want it to go up then simply swap 100% and 0% and change the setting to how you want them if need help with settings google the setting and w3schools will explain how to use that setting 试试这个对我来说很完美的方法，它确实会下降，但是如果希望它上升，那么只需将100％和0％交换，然后将设置更改为所需的设置即可。

for this you do not need any marquee just a div class or id with the content you wish to marquee inside n change it relevant if you explain to me exactly what you want to move and where ill try for you if makes easier 为此，您不需要任何选框，只需将其希望选框的内容的div类或id选入n即可更改它，如果您向我确切地说明了您要移动的内容以及在容易的情况下不宜尝试的地方，请更改它 

 #marquee_div_name { display:block; width: 500px; position:absolute; text-align: center; animation-name: marquee; -webkit-animation-name: marquee; animation-duration: 60s; -webkit-animation-duration: 60s; animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-iteration-count:infinite; animation-direction:normal; -webkit-animation-direction:normal; } @keyframes marquee { from { top: 0%; } to { top: 100%; } } } @-webkit-keyframes marquee { from {top: 0%;} to {top: 100%;} }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 了解CSS3中的字幕效果 - Understanding the Marquee effect in CSS3 CSS3 跑马灯效果，无空格 - CSS3 Marquee Effect, Without Empty Space 字幕与Css3动画 - Marquee with Css3 Animation 在 CSS3 中动画选取框图像 - Animate Marquee Image in CSS3 尝试在CSS3中创建字幕 - Trying to create a marquee in CSS3 使用CSS产生字幕效果 - Using CSS to have marquee effect CSS 带淡入/淡出效果的跑马灯 - CSS Marquee With Fade In/Out Effect 制作一个永无止境的选框动画css3 - Making a never ending marquee animation css3 字幕无法使用css3完成循环 - marquee not completing the cycle using css3 CSS3打字机效果 - CSS3 typewriter effect
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM