Question

我有一些旋转和淡入的文字。我的问题是文字没有颜色，我想把它变成蓝色。

如您所见，我确实为color类分配了rubber属性，但它似乎没有生效。

任何人都可以建议我如何改变我的CSS以实现这一目标吗？谢谢

＆＃13;

.rubber {
  padding: 5px 2px;
  color: blue;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  text-align: center;
  width: 155px;
  transform: rotate(-10deg);
}
// fade-in
 .fade-in p {
  margin-top: 25px;
  text-align: center;
  animation: fadein 8s;
  -moz-animation: fadein 8s;
  /* Firefox */
  -webkit-animation: fadein 8s;
  /* Safari and Chrome */
  -o-animation: fadein 8s;
  /* Opera */
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-moz-keyframes fadein {
  /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-o-keyframes fadein {
  /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}

＆＃13;

<div class="rubber fade-in">
  <p>Job Offered</p>
</div>

＆＃13;

Answer 1

请将// fade-in替换为/* fade-in */。在css 要添加评论行，您应该使用/* comment here */

这是工作代码

＆＃13;

.rubber {
  padding: 5px 2px;
  color: blue;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  text-align: center;
  width: 155px;
  transform: rotate(-10deg);
}
/* fade in */
.fade-in  p{
    margin-top: 25px;
    text-align: center;
    animation: fadein 8s;
    -moz-animation: fadein 8s; /* Firefox */
    -webkit-animation: fadein 8s; /* Safari and Chrome */
    -o-animation: fadein 8s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}

＆＃13;

<div class="rubber fade-in"><p>Job Offered</p></div>

＆＃13;

Answer 2

我在jsfiddle以及普通的HTML页面中尝试过你的代码。唯一的问题是css样式标签中的注释使用此格式

/ Shift + 8评论Shift + 8 /

CSS文字颜色

2 个答案: