html - 使用css3逐渐在文本下显示图像

Question

我有以下使用 css3 的背景剪辑代码。我正在尝试使用动画，以便文本最终变成白色，同时显示背景。但我做不对。甚至可以只用 css 做到这一点吗？

.text {
  background-image: url('images/car.jpg');
  font-size: 90px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  background-clip: text;
  animation-name: flip;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes flip {
  0% {
    background-image: url('images/car.jpg');
    font-size: 250px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    background-clip: text;
  }
  100% {
    color: #fff;
    background-image: url('images/car.jpg');
    font-size: 200px;
  }
}

<div class="text"><b>Lorem Ipsum</b>
</div>

Answer 1

你可以看看mix-blend-mode:

body {margin:0;}

.text {
  min-height:100vh;
  background-image: url('http://blog.hdwallsource.com/wp-content/uploads/2015/05/toy-car-wallpaper-39199-40102-hd-wallpapers.jpg');
  background-size:cover;
  font-size: 20vw;
 
}
b {
  display:inline-block;
   box-shadow:inset 0 0 0 1000px white, 0 0 0 1000px white;
  mix-blend-mode:screen;
  animation: flip  4s  linear  forwards;
}
@keyframes flip {
 
  75% {
    
    color: #fff;
  }
  100% {    
    color: #fff;
    font-size: 15vw;
    box-shadow:inset 0 0 0 1000px rgba(255,255,255,0), 0 0 0 2000px rgba(255,255,255,0);
  }
}

<div class="text"><b>Tiny mini</b>
</div>

可以玩的笔:http://codepen.io/gc-nomade/pen/rWrvKP