600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > css 霓虹灯转动效果 CSS3 文本霓虹灯闪烁特效

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

时间:2023-01-13 04:31:35

相关推荐

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

CSS

语言:

CSSSCSS

确定

@import url("/css?family=Nixie+One");

@import url("/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;

}

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。