html字体外颜色轮廓,HTML5 文本特效 - 轮廓提取

CSS

语言：

CSSSCSS

确定

body {

background: #eaeaea;

}

#effect h1 {

color: #222;

text-align: center;

padding-top: 10%;

font-size: 100px;

font-family: "Modern Grotesk";

font-weight: bold;

position: relative;

}

#effect h1 p {

display: inline-block;

position: relative;

width: 100px;

height: 100px;

line-height: 100px;

}

#effect h1 p span {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

#effect h1 p span:first-child {

opacity: 1 !important;

z-index: 5;

}

#effect h1 p:hover span:first-child {

font-size: 104px;

bottom: -2px;

left: -2px;

right: -2px;

}

#effect h1 p span.wave {

color: #eaeaea;

text-shadow: 2px 0 0 #aaa, -2px 0 0 #aaa, 0 2px 0 #aaa, 0 -2px 0 #aaa, 1px 1px #aaa, -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa;

opacity: 0;

z-index: 1;

-webkit-animation: wave;

-webkit-animation-duration: 600ms;

-webkit-animation-timing-function: ease-in-out;

-moz-animation: wave;

-moz-animation-duration: 600ms;

-moz-animation-timing-function: ease-in-out;

}

@keyframes wave {

0% {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

opacity: 0;

}

50% {

opacity: 1;

}

100% {

font-size: 150px;

top: -250px;

left: -50px;

right: -50px;

opacity: 0;

}

}

@-webkit-keyframes wave {

0% {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

opacity: 0;

}

50% {

opacity: 1;

}

100% {

font-size: 150px;

top: -250px;

left: -50px;

right: -50px;

opacity: 0;

}

}