html字体边缘怎么带颜色,CSS3 文字边缘的一些动效

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body {

font-family: 'Raleway', sans-serif;

background: #F9F8F8;

}

header.header {

position: absolute;

top: 50%;

left: 0;

width: 100%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

header.header h1 {

font-size: 8rem;

color: #222222;

text-align: center;

margin-top: 0;

text-transform: uppercase;

font-weight: 900;

}

.glitch-window {

position: absolute;

top: 0;

left: -2px;

width: 100%;

color: #222222;

text-shadow: 2px 0 #F9F8F8, -1px 0 yellow, -2px 0 green;

overflow: hidden;

-webkit-animation: crt-me 2500ms infinite linear alternate-reverse;

animation: crt-me 2500ms infinite linear alternate-reverse;

}

@-webkit-keyframes crt-me {

0% {

clip: rect(31px, 9999px, 94px, 0);

}

10% {

clip: rect(112px, 9999px, 76px, 0);

}

20% {

clip: rect(85px, 9999px, 77px, 0);

}

30% {

clip: rect(27px, 9999px, 97px, 0);

}

40% {

clip: rect(64px, 9999px, 98px, 0);

}

50% {

clip: rect(61px, 9999px, 85px, 0);

}

60% {

clip: rect(99px, 9999px, 114px, 0);

}

70% {

clip: rect(34px, 9999px, 115px, 0);

}

80% {

clip: rect(98px, 9999px, 129px, 0);

}

90% {

clip: rect(43px, 9999px, 96px, 0);

}

100% {

clip: rect(82px, 9999px, 64px, 0);

}

}

@keyframes crt-me {

0% {

clip: rect(31px, 9999px, 94px, 0);

}

10% {

clip: rect(112px, 9999px, 76px, 0);

}

20% {

clip: rect(85px, 9999px, 77px, 0);

}

30% {

clip: rect(27px, 9999px, 97px, 0);

}

40% {

clip: rect(64px, 9999px, 98px, 0);

}

50% {

clip: rect(61px, 9999px, 85px, 0);

}

60% {

clip: rect(99px, 9999px, 114px, 0);

}

70% {

clip: rect(34px, 9999px, 115px, 0);

}

80% {

clip: rect(98px, 9999px, 129px, 0);

}

90% {

clip: rect(43px, 9999px, 96px, 0);

}

100% {

clip: rect(82px, 9999px, 64px, 0);

}

}

.inspiration-button {

font-family: Helvetica, sans-serif;

position: fixed;

display: inline-block;

z-index: 100;

bottom: 1rem;

left: 50%;

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

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

color: white;

text-decoration: none;

padding: 0.75rem 1rem;

border-radius: 80px;

background: -webkit-linear-gradient(180deg, #1e80dc, #c61590);

background: linear-gradient(270deg, #1e80dc, #c61590);

-webkit-transition: -webkit-transform 250ms ease;

transition: -webkit-transform 250ms ease;

transition: transform 250ms ease;

transition: transform 250ms ease, -webkit-transform 250ms ease;

}

.inspiration-button:hover,

.inspiration-button:focus,

.inspiration-button:active {

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

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

}