android 字体外发光,CSS3 霓虹外发光字体效果-CSDN博客

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Passion+One:900);

body {

background: #100019;

}

.prismix {

margin: 20px auto;

width: 80%;

max-width: 1000px;

height: 200px;

background-image: url('https://4f01b72a6306fc2fac7bb346235d7e131c41e8ba.googledrive.com/host/0B3V4LxM9XSTzR2ZuSzdJN19RVzA/Portfolio/Animatext/images/horizon.png');

background-position: center center;

background-size: 1000px 200px;

border-radius: 10px;

overflow: hidden;

text-align: center;

vertical-align: middle;

box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.5);

}

.prismix:before {

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

}

.RainbowPrism {

display: inline-block;

margin: 0;

color: rgb(30, 15, 60);

font-family: 'Passion One';

font-size: 60px;

line-height: 60px;

min-width: 50px;

outline: none;

vertical-align: middle;

-webkit-animation: 10s RainbowPrism infinite linear;

animation: 10s RainbowPrism infinite linear;

text-shadow: 0px -6px 6px rgba(255, 200, 200, 0.8), -8px -4px 6px rgba(255, 255, 200, 0.9), -8px 4px 6px rgba(200, 255, 200, 1.0), 0px 6px 6px rgba(200, 255, 255, 0.9), 8px 4px 6px rgba(200, 200, 255, 0.8), 8px -4px 6px rgba(255, 200, 255, 0.8), -1px -1px 1px rgba(255, 255, 255, 0.7), 1px 1px 1px rgba(50, 50, 50, 0.5);

}

@-webkit-keyframes RainbowPrism {

0% {

}

17% {

text-shadow: 8px -4px 6px rgba(255, 200, 200, 0.8), 0px -6px 6px rgba(255, 255, 200, 0.9), -8px -4px 6px rgba(200, 255, 200, 1.0), -8px 4px 6px rgba(200, 255, 255, 0.9), 0px 6px 6px rgba(200, 200, 255, 0.8), 8px 4px 6px rgba(255, 200, 255, 0.8), -1px -1px 1px rgba(255, 255, 255, 0.7), 1px 1px 1px rgba(50, 50, 50, 0.5);

}

34% {

text-shadow: 8px 4px 6px rgba(255, 200, 200, 0.8), 8px -4px 6px rgba(255, 255, 200, 0.9), 0px -6px 6px rgba(200, 255, 200, 1.0), -8px -4px 6px rgba(200, 255, 255, 0.9), -8px 4px 6px rgba(200, 200, 255, 0.8), 0px 6px 6px rgba(255, 200, 255, 0.8), -1px -1px 1px rgba(255, 255, 255, 0.7), 1px 1px 1px rgba(50, 50, 50, 0.5);

}

51% {

text-shadow: 0px 6px 6px rgba(255, 200, 200, 0.8), 8px 4px 6px rgba(255, 255, 200, 0.9), 8px -4px 6px rgba(200, 255, 200, 1.0), 0px -6px 6px rgba(200, 255, 255, 0.9), -8px -4px 6px rgba(200, 200, 255, 0.8), -8px 4px 6px rgba(255, 200, 255, 0.8), -1px -1px 1px rgba(255, 255, 255, 0.7), 1px 1px 1px rgba(50, 50, 50, 0.5);

}

68% {

text-shadow: -8px 4px 6px rgba(255, 200, 200, 0.8), 0px 6px 6px rgba(255, 255, 200, 0.9), 8px 4px 6px rgba(200, 255, 200, 1.0), 8px -4px 6px rgba(200, 255, 255, 0.9), 0px -6px 6px rgba(200, 200, 255, 0.8), -8px -4px 6px rgba(255, 200, 255, 0.8), -1px -1px 1px rgba(255, 255, 255, 0.7), 1px 1px 1px rgba(50, 50, 50, 0.5);

}

85% {

text-shadow: -8px -4px 6px rgba(255, 200, 200, 0.8), -8px 4px 6px rgba(255, 255, 200, 0.9), 0px 6px 6px rgba(200, 255, 200, 1.0), 8px 4px 6px rgba(200, 255, 255, 0.9), 8px -4px 6px rgba(200, 200, 255, 0.8), 0px -6px 6px rgba(255, 200, 255, 0.8), -1px -1px 1px rgba(255, 255, 255, 0.7), 1px 1px 1px rgba(50, 50, 50, 0.5);

}

100% {

}

@keyframes RainbowPrism {

0% {

}

17% {

}

34% {

}

51% {

}