css3火焰字,SVG+CSS3 一半海水一半火焰文字特效

CSS

语言：

CSSSCSS

确定

*,

:before,

:after {

margin: 0;

padding: 0;

box-sizing: border-box;

lighting-color: #ccc

}

filter {

color-interpolation-filters: sRGB

}

.no-area {

position: absolute;

left: -999em

}

.links {

display: inline-block;

margin: 1em;

background: #fff;

padding: 4px 8px

}

html {

background-color: #111

}

p {

position: relative;

font-family: sans-serif;

font-size: 8rem;

font-weight: bold;

text-align: center;

width: -moz-fit-content;

width: -webkit-fit-content;

width: fit-content;

margin: 2rem auto 0

}

p:before,

p:after {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

content: attr(data-text)

}

p:before {

-webkit-text-fill-color: transparent;

background: linear-gradient(#000 0%, #113e87 22%, #10cccc 50%, #000 51%, #e21ddc 78%, #e21ddc 78%, #fff 100%);

-webkit-background-clip: text;

background-clip: text

}

p:after {

text-shadow: 0 0 5px, -3px -3px .8px #aaa, -2px -3px .8px #aaa, -1px -3px .8px #aaa, 0 -3px .8px #aaa, 1px -3px .8px #aaa, 2px -3px .8px #aaa, 3px -3px .8px #aaa, 3px -2px .8px #aaa, 3px -1px .8px #aaa, 3px 0 .8px #aaa, 3px 1px .8px #aaa, 3px 2px .8px #aaa, 3px 3px .8px #aaa, 2px 3px .8px #aaa, 1px 3px .8px #aaa, 0 3px .8px #aaa, -1px 3px .8px #aaa, -2px 3px .8px #aaa, -3px 3px .8px #aaa, -3px 2px .8px #aaa, -3px 1px .8px #aaa, -3px 0 .8px #aaa, -3px -1px .8px #aaa, -3px -2px .8px #aaa;

mix-blend-mode: screen

}