300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html文字水纹特效 使用CSS3 clip-path实现的标题文本水纹波动动画特效

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

时间:2020-02-10 17:14:35

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。