HTML和CSS的突发新闻股票

我挣扎着让“Breaking”这个词在它的盒子中居中。我也在努力让滚动持续下去，现在有太多的延迟。我也想要“打破”，“TEST”标题脱颖而出，更加大胆。现在编码已经完成，并且工作正常。只是一些小的调整。也有可能使无论我键入到“破”与测试”是一个链接呢？谢谢！HTML和CSS的突发新闻股票

.breaking-news-headline { 
 
    display: block; 
 
    position: absolute; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    margin-top: -22px; 
 
    color: white; 
 
    margin-left: 150px; 
 
} 
 

 
.breaking-news-title { 
 
    background-color: #FFFF00; 
 
    display: block; 
 
    height: 20px; 
 
    width: 120px; 
 
    font-family: arial; 
 
    font-size: 15px; 
 
    position: absolute; 
 
    top: 0px; 
 
    margin-top: auto; 
 
    margin-left: auto; 
 
    padding-top: 10px; 
 
    padding-left: 10px; 
 
    z-index: 3; 
 
    &:before { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    width: 0px; 
 
    height: 0px; 
 
    top: 10; 
 
    left: -12px; 
 
    border-left: 12px solid transparent; 
 
    border-right: 0px solid transparent; 
 
    border-bottom: 30px solid #FFEA00; 
 
    } 
 
    &:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    width: 10px; 
 
    height: 0px; 
 
    right: -12px; 
 
    top: 0; 
 
    border-right: 12px solid transparent; 
 
    border-left: 0px solid transparent; 
 
    border-top: 30px solid #FFEA00; 
 
    } 
 
} 
 

 
#breaking-news-colour { 
 
    height: 30px; 
 
    width: 2394px; 
 
    background-color: #FF0000; 
 
} 
 

 
#breaking-news-container { 
 
    height: 30px; 
 
    width: 800px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    &:before { 
 
    content: ""; 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: #3399FF; 
 
    position: absolute; 
 
    z-index: 2; 
 
    } 
 
} 
 

 
.animated { 
 
    -webkit-animation-duration: 0.2s; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation-duration: 0.2s; 
 
    -moz-animation-fill-mode: both; 
 
    -webkit-animation-iteration-count: 1; 
 
    -moz-animation-iteration-count: 1; 
 
} 
 

 
.delay-animated { 
 
    -webkit-animation-duration: 0.4s; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation-duration: 0.4s; 
 
    -moz-animation-fill-mode: both; 
 
    -webkit-animation-iteration-count: 1; 
 
    -moz-animation-iteration-count: 1; 
 
    -webkit-animation-delay: 0.3s; 
 
    animation-delay: 0.3s; 
 
} 
 

 
.scroll-animated { 
 
    -webkit-animation-duration: 3s; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation-duration: 3s; 
 
    -moz-animation-fill-mode: both; 
 
    -webkit-animation-iteration-count: 1; 
 
    -moz-animation-iteration-count: 1; 
 
    -webkit-animation-delay: 0.5s; 
 
    animation-delay: 0.5s; 
 
} 
 

 
.delay-animated2 { 
 
    -webkit-animation-duration: 0.4s; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation-duration: 0.4s; 
 
    -moz-animation-fill-mode: both; 
 
    -webkit-animation-iteration-count: 1; 
 
    -moz-animation-iteration-count: 1; 
 
    -webkit-animation-delay: 0.5s; 
 
    animation-delay: 0.5s; 
 
} 
 

 
.delay-animated3 { 
 
    -webkit-animation-duration: 5s; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation-duration: 5s; 
 
    -moz-animation-fill-mode: both; 
 
    -webkit-animation-iteration-count: 1; 
 
    -moz-animation-iteration-count: 1; 
 
    -webkit-animation-delay: 0.5s; 
 
    animation-delay: 3s; 
 
} 
 

 
.fadein { 
 
    -webkit-animation-name: fadein; 
 
    -moz-animation-name: fadein; 
 
    -o-animation-name: fadein; 
 
    animation-name: fadein; 
 
} 
 

 
@-webkit-keyframes fadein { 
 
    from { 
 
    margin-left: 1000px 
 
    } 
 
    to {} 
 
} 
 

 
@-moz-keyframes fadein { 
 
    from { 
 
    margin-left: 1000px 
 
    } 
 
    to {} 
 
} 
 

 
.slidein { 
 
    -webkit-animation-name: slidein; 
 
    -moz-animation-name: slidein; 
 
    -o-animation-name: slidein; 
 
    animation-name: slidein; 
 
} 
 

 
@keyframes marquee { 
 
    0% { 
 
    left: 0; 
 
    } 
 
    20% { 
 
    left: 0; 
 
    } 
 
    100% { 
 
    left: -100%; 
 
    } 
 
} 
 

 
.marquee { 
 
    animation: marquee 3s linear infinite; 
 
    -webkit-animation-duration: 10s; 
 
    -moz-animation-duration: 10a; 
 
    -webkit-animation-delay: 0.5s; 
 
    animation-delay: 3s; 
 
} 
 

 
@-webkit-keyframes slidein { 
 
    from { 
 
    margin-left: 800px 
 
    } 
 
    to { 
 
    margin-top: 0px 
 
    } 
 
} 
 

 
@-moz-keyframes slidein { 
 
    from { 
 
    margin-left: 800px 
 
    } 
 
    to { 
 
    margin-top: 0px 
 
    } 
 
} 
 

 
.slideup { 
 
    -webkit-animation-name: slideup; 
 
    -moz-animation-name: slideup; 
 
    -o-animation-name: slideup; 
 
    animation-name: slideup; 
 
} 
 

 
@-webkit-keyframes slideup { 
 
    from { 
 
    margin-top: 30px 
 
    } 
 
    to { 
 
    margin-top: 0; 
 
    } 
 
} 
 

 
@-moz-keyframes slideup { 
 
    from { 
 
    margin-top: 30px 
 
    } 
 
    to { 
 
    margin-top: 0; 
 
    } 
 
}

<div id="breaking-news-container"> 
 
    <div id="breaking-news-colour" class="slideup animated"> 
 
    </div> 
 
    <span class="breaking-news-title delay-animated slidein"> 
 
     BREAKING 
 
    </span> 
 
    <a class="breaking-news-headline delay-animated2 fadein marquee"> 
 
     TEST 
 
    </a> 
 
</div>

来源

2017-02-05 aerebourne

我挣扎着爬单词‘拆分’来在框中居中它是

.breaking-news-title { 
    text-align: center; 
    font-weight: bold; 
    padding-top: 7px; 
    height: 30px; 
}

删除→填充左：0像素;

我也想“打破”，而“TEST”的标题要站出来，而且要更加大胆。

just add font-weight：bold;

也就是有可能使无论我键入到“破”与测试” 被链接呢？谢谢！

是，更换您的跨度<a>标签和你的‘TEST’已经<a>标签

，并通过根据caniuse.com <marquee>标签已经过时，所以你不应该使用它的方式

http://caniuse.com/#search=marquee

但这里是我做了
https://jsfiddle.net/gs8p0zc3/

使用这种CSS3动画，而不是字幕

编辑了你的代码的类似的设计编辑 https://jsfiddle.net/sfjjvpk5/1/

来源

2017-02-06 01:36:14

谢谢你这么多，我用你的，因为它更好。我非常感谢你的帮助，一直在努力研究这么久。刚开始学习HTML，CSS。谢谢！ <3 – aerebourne

@aerebourne好吗，很高兴我帮你，享受你的编码:) –

HTML和CSS的突发新闻股票

回答

相关问题