Question

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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

你可以看看mix-blend-mode：

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

使用笔：http://codepen.io/gc-nomade/pen/rWrvKP

使用css3逐渐显示文本下的图像

1 个答案: