Page Widget How to - Create CSS3 background-clip:text

Question

We would like to know how to create CSS3 background-clip:text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.mask-galaxy {<!--from   w  ww.  j  a v a 2  s. co m-->
  background:
    url(http://www.java2s.com/style/download.png)
    center center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: travelGalaxy 10s linear infinite;
  -moz-animation: travelGalaxy 10s linear infinite;
  -moz-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-animation: travelGalaxy 10s linear infinite;
  -o-text-fill-color: transparent;
  -o-background-clip: text;
  -o-animation: travelGalaxy 10s linear infinite;
}

@-webkit-keyframes travelGalaxy { 
  0% {background-position: right bottom;}
  100%{background-position: left top;}
}
@-moz-keyframes travelGalaxy { 
  0% {background-position: right bottom;}
  100%{background-position:left top;}
}
</style>
</head>
<body>
  <article class="mask-galaxy">
    <h1>java2s.com</h1>
  </article>
</body>
</html>

The code above is rendered as follows: