Animation How to - Rotate image as the background of text

Question

We would like to know how to rotate image as the background of text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h1 {<!--from  w ww  . ja  va 2s.  c  o  m-->
  font-size: 100px;
  text-align: center;
}
.hd {
  background:url("http://www.java2s.com/style/download.png") center center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: move 10s linear infinite;
  -moz-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-animation: move 10s linear infinite;
  -o-text-fill-color: transparent;
  -o-background-clip: text;
  -o-animation: move 10s linear infinite;
}

@-webkit-keyframes move { 
    0% {background-position: center left;}
    100%{background-position:center right;}
}
@-moz-keyframes move { 
    0% {background-position: center left;}
    100%{background-position:left bottom;}
}
</style>
</head>
<body>
  <div class="hd">
    <h1>CSS</h1>
  </div>
</body>
</html>

The code above is rendered as follows: