我正在努力让"Breaking"这个词在它所在的盒子中居中。我也在努力使滚动连续,现在延迟太多了。我还希望"突破"和"测试"标题脱颖而出,并且更加大胆。现在编码已经完成,并且可以工作。只是一些小的调整。还有没有可能使我在"中断"和测试中键入的任何内容也成为链接?
.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>
我正在努力让"打破"这个词在它所在的框中居中
.breaking-news-title {
text-align: center;
font-weight: bold;
padding-top: 7px;
height: 30px;
}
删除→左填充:0px;
我还希望"打破"和"测试"标题站得住脚 出来,更大胆。
只需添加字体粗细:粗体;
也可以使我输入的任何内容进入"打破"并测试" 也是链接吗?谢谢!
是的,将您的 span 替换为<a>
标签,并且您的"TEST"已经<a>
标签
顺便说一下,根据 caniuse.com <marquee>
标签已被弃用,所以你不应该使用它
http://caniuse.com/#search=marquee
但这是我所做的
编辑https://jsfiddle.net/gs8p0zc3/
使用此 CSS3 动画而不是选框
编辑对你的代码进行了类似的设计https://jsfiddle.net/sfjjvpk5/1/