android 字体外发光,CSS3 霓虹外发光字体效果
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% {
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);
}
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% {
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);
}
}
@keyframes RainbowPrism {
0% {
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);
}
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% {
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);
}
}
總結
以上是生活随笔為你收集整理的android 字体外发光,CSS3 霓虹外发光字体效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu16.04 安装VScode
- 下一篇： CSS3实现5个常用的网页动画效果