热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

android字体外发光,CSS3霓虹外发光字体效果

CSS语言:CSSSCSS确定importurl(https:fonts.googleapis.comcss?familyPassionOne:900);body{b

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);

}

}



推荐阅读
author-avatar
淡漠少_341
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有