CSS3 文本内的泡沫漂浮动画--text-fill-color--background-clip--animation

CSS3 文本内的泡沫漂浮动画

html

<h1>happy!</h1>

css

<style>
@import 'https://fonts.googleapis.com/css?family=Rajdhani:700';
body{
margin: 0;
background: #73cde7;
}
h1{
font-size: 200px;
font-family: 'Rajdhani',sans-serif;
background-image: url("./img/bubbles.png");
background-repeat: repeat;
background-color: #011f42;
text-align: center;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-animation: background 12s infinite linear;
animation: background 12s infinite linear;
}
@keyframes background{
from{
background-position: 0 0%;
}
to{
background-position: 0 -300px;
}
}
</style>