css 霓虹灯转动效果,CSS3 文本霓虹灯闪烁特效

CSS

语言：

CSSSCSS

确定

@import url("http://fonts.googleapis.com/css?family=Nixie+One");

@import url("http://fonts.googleapis.com/css?family=League+Script");

.container {

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: center;

align-items: center;

}

.sign {

-ms-transform: rotate(-3deg);

-webkit-transform: rotate(-3deg);

transform: rotate(-3deg);

}

body {

margin: 70px;

background: #313131;

font-family: 'Nixie One', Helvetica, Arial, sans-serif;

font-size: 50px;

}

#title {

font-size: 110px;

}

#trav {

animation: blink 1.0E-5s infinite alternate;

}

#fade {

opacity: 0.8;

color: #ebffff;

text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 80px #38eeff;

animation: fade 3s infinite alternate;

}

.neon-blue {

margin: 0 auto;

text-align: center;

color: #ebffff;

text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff;

}

.neon-purple {

font-family: 'League Script', Helvetica, Arial, sans-serif;

font-size: 100px;

margin: 0 auto;

text-align: center;

color: #ccf;

text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5), 0 0 20px #fff, 0 0 10px #7d26cd, 0 0 50px #7d26cd;

}

@-moz-keyframes blink {

70% {

opacity: 0.4;

text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2), 0 0 1px #fff, 0 0 20px #7d26cd;

}

@-webkit-keyframes blink {

70% {

opacity: 0.4;

text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2), 0 0 1px #fff, 0 0 20px #7d26cd;

}

@-o-keyframes blink {

70% {

opacity: 0.4;

text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2), 0 0 1px #fff, 0 0 20px #7d26cd;

}

@keyframes blink {

70% {

opacity: 0.4;

text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2), 0 0 1px #fff, 0 0 20px #7d26cd;

}

@-moz-keyframes fade {

40% {

opacity: 0.8;

}

42% {

opacity: 0.1;

}

43% {

opacity: 0.8;

}

45% {

opacity: 0.1;

}

46% {

opacity: 0.8;

}

@-webkit-keyframes fade {

40% {

opacity: 0.8;

}

42% {

opacity: 0.1;

}

43% {

opacity: 0.8;

}

45% {

opacity: 0.1;

}

46% {

opacity: 0.8;

}

@-o-keyframes fade {

40% {

opacity: 0.8;

}

42% {

opacity: 0.1;

}

43% {

opacity: 0.8;

}

45% {

opacity: 0.1;

}

46% {

opacity: 0.8;

}

@keyframes fade {

40% {

opacity: 0.8;

}

42% {

opacity: 0.1;

}

43% {

opacity: 0.8;

}

45% {

opacity: 0.1;

}

46% {

opacity: 0.8;

}

css 霓虹灯转动效果,CSS3 文本霓虹灯闪烁特效相关推荐

css 霓虹灯转动效果,CSS3霓虹灯文字动画特效
这是一个完全由CSS3实现的霓虹灯文字动画特效,虽然看起来有flash的质感和js驱动的错觉,但事实上你可以看到所有代码如下:html> CSS3霓虹灯文字特效 .text-effect { o ...
HTML霓虹灯闪光效果,HTML5文本的霓虹灯轻微闪烁动画特效
CSS 语言: CSSSCSS 确定 @import url("http://fonts.googleapis.com/css?family=Nixie+One"); @impor ...
html霓虹灯文字效果,jQuery绚丽霓虹灯文字特效插件
novacancy.js是一款非常有意思的.效果绚丽的jQuery绚丽霓虹灯文字特效插件.该文字特效插件可以将任意文本转换为霓虹灯效果,你可以设置灯光的颜色,发光的颜色,几个文字是不亮灯状态,以及灯光 ...
HTML霓虹灯闪光效果,带鼠标滑过特效的jQuery霓虹灯文字插件
这是一款可以生成炫酷霓虹灯特效的jQuery插件.该霓虹灯特效使用CSS3 text-shadow属性来制作,在鼠标滑过文字时,还带有平滑变色效果. 使用方法在页面中引入jquery和neon_te ...
Web前端开发笔记——第三章 CSS语言第八节 CSS3文本文字设置
目录前言一.文本阴影二.强制换行三.字体设置结语前言本节中的仅支持CSS3中的新语法,比如文字的阴影.长文本的换行等等. 一.文本阴影通过定义text-shadow来对文本进行阴影设置 ...
html css 悬浮切换效果,CSS3悬浮动画效果_html/css_WEB-ITnose
利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...
html文字粒子效果简陋,5个很棒的CSS3文本粒子动画特效
CSS 语言: CSSSCSS 确定 body { padding: 40px 0; font-family: 'bebas', sans-serif; } body .textcontainer { ...
html中字体纹理效果,CSS3 文本特效 - 浮雕（雕刻）纹理
CSS 语言: CSSSCSS 确定 *, *:after, *:before { padding: 0; margin: 0; } body { font-family: "Helveti ...
html css雪花动画效果,css3动画雪花特效
分享一个用强大的css3动画做的雪花背景,做网站背景很漂亮~ 补充一点关于animation的知识点 animation 必填项 animation-name 动画名称(关键帧名称) animatio ...

css 霓虹灯转动效果,CSS3 文本霓虹灯闪烁特效

css 霓虹灯转动效果,CSS3 文本霓虹灯闪烁特效相关推荐

最新文章

热门文章