HTML5求自动在闪,HTML5 CSS3闪烁灯光文字动画效果

CSS

语言：

CSSSCSS

确定

html,

body {

background: -webkit-linear-gradient(45deg, #2d2d2d 9%, black 100%);

background: linear-gradient(45deg, #2d2d2d 9%, black 100%);

width: 100%;

height: 100%;

}

h1 {

font-family: "Microsoft Yahei", sans-serif;

font-size: 12vw;

text-align: center;

line-height: 1;

margin: 0;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

position: absolute;

color: #2d2d2d;

letter-spacing: -.5rem;

}

h1:before {

content: attr(data-heading);

position: absolute;

overflow: hidden;

color: #ffcc00;

width: 100%;

z-index: 5;

text-shadow: none;

left: 0%;

text-align: left;

-webkit-animation: flicker 3s linear infinite;

animation: flicker 3s linear infinite;

}

@-webkit-keyframes flicker {

0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {

opacity: .99;

text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4), 1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;

}

20%,

21.999%,

63%,

63.999%,

65%,

69.999% {

opacity: 0.4;

text-shadow: none;

}

}

@keyframes flicker {

0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {

opacity: .99;

text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4), 1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;

}

20%,

21.999%,

63%,

63.999%,

65%,

69.999% {

opacity: 0.4;

text-shadow: none;

}

}