如何使用CSS填充文本颜色？

Question

我正在使用这个奇妙的字体来制作预测图标,当我尝试在图标之间使用CSS3来动画它们时,我试图用云来隐藏太阳,但我需要用颜色填充云,这是可能的CSS,还是我需要把它作为SVG或Canvas？

这是图片:

Answer 1

而不是使用图标,为什么不尝试自己制作？这是仅使用css的"云和太阳"示例的基本模型:

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.sun {
  height: 30px;
  width: 30px;
  background: yellow;
  border-radius: 50%;
  position: absolute;
  left: 55px;
  top: 10px;
  box-shadow: 0 0 2px 2px white, 0 0 4px 4px yellow;
}

<div class="wap">
  <div class="cloud"></div>
  <div class="sun"></div>
</div>

雨？

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.rain {
  height: 30px;
  width: 55px;
  transform:rotate(10deg);
  background: -moz-linear-gradient(left,  rgba(108,144,252,1) 0%, rgba(108,144,252,0) 1%, rgba(108,144,252,0) 9%, rgba(108,144,252,1) 10%, rgba(108,144,252,0) 11%, rgba(108,144,252,0) 19%, rgba(108,144,252,1) 20%, rgba(108,144,252,0) 21%, rgba(108,144,252,0) 29%, rgba(108,144,252,1) 30%, rgba(108,144,252,0) 31%, rgba(108,144,252,0) 39%, rgba(108,144,252,1) 40%, rgba(108,144,252,0) 41%, rgba(108,144,252,0) 49%, rgba(108,144,252,1) 50%, rgba(108,144,252,0) 51%, rgba(108,144,252,0) 59%, rgba(108,144,252,1) 60%, rgba(108,144,252,0) 61%, rgba(108,144,252,0) 69%, rgba(108,144,252,1) 70%, rgba(108,144,252,0) 71%, rgba(108,144,252,0) 79%, rgba(108,144,252,1) 80%, rgba(108,144,252,0) 81%, rgba(108,144,252,0) 89%, rgba(108,144,252,1) 90%, rgba(108,144,252,0) 91%, rgba(108,144,252,0) 99%, rgba(108,144,252,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(108,144,252,1)), color-stop(1%,rgba(108,144,252,0)), color-stop(9%,rgba(108,144,252,0)), color-stop(10%,rgba(108,144,252,1)), color-stop(11%,rgba(108,144,252,0)), color-stop(19%,rgba(108,144,252,0)), color-stop(20%,rgba(108,144,252,1)), color-stop(21%,rgba(108,144,252,0)), color-stop(29%,rgba(108,144,252,0)), color-stop(30%,rgba(108,144,252,1)), color-stop(31%,rgba(108,144,252,0)), color-stop(39%,rgba(108,144,252,0)), color-stop(40%,rgba(108,144,252,1)), color-stop(41%,rgba(108,144,252,0)), color-stop(49%,rgba(108,144,252,0)), color-stop(50%,rgba(108,144,252,1)), color-stop(51%,rgba(108,144,252,0)), color-stop(59%,rgba(108,144,252,0)), color-stop(60%,rgba(108,144,252,1)), color-stop(61%,rgba(108,144,252,0)), color-stop(69%,rgba(108,144,252,0)), color-stop(70%,rgba(108,144,252,1)), color-stop(71%,rgba(108,144,252,0)), color-stop(79%,rgba(108,144,252,0)), color-stop(80%,rgba(108,144,252,1)), color-stop(81%,rgba(108,144,252,0)), color-stop(89%,rgba(108,144,252,0)), color-stop(90%,rgba(108,144,252,1)), color-stop(91%,rgba(108,144,252,0)), color-stop(99%,rgba(108,144,252,0)), color-stop(100%,rgba(108,144,252,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c90fc', endColorstr='#6c90fc',GradientType=1 ); /* IE6-9 */

  position: absolute;
  left: 18px;
  top: 35px;
 }

<div class="wap">
  <div class="cloud"></div>
  <div class="rain"></div>
</div>

雷？

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.thunder {
  height: 20px;
  width: 20px;
  border-right: 2px solid yellow;
  border-top: 2px solid yellow;
  transform: rotate(55deg);
  position: absolute;
  left: 15px;
  top: 40px;
}
.thunder:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 5px;
  height: 20px;
  width: 30px;
  border-right: 2px solid yellow;
  border-top: 2px solid yellow;

<div class="wap">
  <div class="cloud"></div>
  <div class="thunder"></div>
</div>