html文字水纹特效,使用CSS3 clip-path实现的标题文本水纹波动动画特效

CSS

语言：

CSSSCSS

确定

* {

font-family: 'Microsoft Yahei', sans-serif;

}

.panel {

overflow: auto;

width: 100%;

height: 100vh;

position: relative;

background: radial-gradient(circle, #0e0e0e 15%, #010101);

}

.wow {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

font-size: 10vmin;

color: #fff;

line-height: .85;

text-transform: uppercase;

background-image: url(/uploads/161001/lighten2.jpg);

background-size: contain;

-webkit-text-fill-color: rgba(255, 255, 255, 0.1);

-webkit-background-clip: text;

z-index: 10;

}

.wow:before {

content: 'www';

display: table;

margin-left: auto;

margin-right: auto;

font-size: 3.5vmin;

color: white;

-webkit-text-fill-color: white;

-webkit-background-clip: none;

background-color: red;

padding: 3px;

}

.wow + .wow {

-webkit-text-fill-color: red;

z-index: 20;

animation: meh 3s ease-out infinite alternate;

}

@keyframes meh {

from {

clip-path: polygon(100% 0, 100% 100%, 20% 100%, 61% 91%, 94% 47%);

}

50% {

clip-path: polygon(100% 0, 100% 100%, 20% 100%, 59% 52%, 74% 13%);

}

to {

clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 85%, 87% 41%);

}

}

.jj span {

display: block;

}

body{margin: 0;}