android霓虹灯跑的动画,CSS3动画霓虹灯

css

@import url(https://fonts.googleapis.com/css?family=Monoton);

@import url(https://fonts.googleapis.com/css?family=Great+Vibes);

html,

body {

width: 100%;

height: 100%;

margin: 0;

overflow: hidden;

}

body {

animation: bgNeon2 3s infinite;

}

.bg {

background-image: url(http://www.brightlikeneon.com/wp-content/themes/codium-extend/images/bg.jpg);

width: 100%;

height: 100%;

background-position: center;

opacity: .3;

}

.input-text {

position: absolute;

left: 20px;

top: 20px;

width: 280px;

padding: 5px 20px;

border: none;

background-color: rgba(0, 0, 0, .4);

color: #E91E63;

font-family: 'Monoton', cursive;

font-size: 35px;

box-shadow: 15px 15px 23px rgba(0, 0, 0, .2);

outline: none;

}

.wrapper {

position: absolute;

width: auto;

height: 150px;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

text-align: center;

}

.wrapper h1 {

font-size: 100px;

margin: 0;

font-weight: normal;

animation: neon2 3s infinite;

}

.wrapper h2 {

font-size: 20px;

margin: 0;

font-weight: normal;

text-shadow: 0 0 10px #E91E63, 0 0 30px #E91E9F;

color: #E91E63;

line-height: 10px;

}

.font1 {

font-family: 'Monoton', cursive;

}

.font2 {

font-family: 'Great Vibes', cursive;

}

@keyframes neon1 {

0% {

text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;

}

100% {

text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #D41355;

}

}

@keyframes neon2 {

0% {

color: #E91E63;

text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;

}

80% {

color: #E91E63;

text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;

}

81% {

color: #222;

text-shadow: 0 0 10px #000, 1px 1px rgb(99, 74, 82), -2px 0px 4px #29121A;

}

94% {

color: #222;

text-shadow: 0 0 10px #000, 1px 1px rgb(99, 74, 82), -2px 0px 4px #29121A;

}

95% {

color: #E91E63;

text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;

}

96% {

color: #222;

text-shadow: 0 0 10px #000, 1px 1px rgb(99, 74, 82), -2px 0px 4px #29121A;

}

97% {

color: #E91E63;

text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;

}

98% {

color: #E91E63;

text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;

}

99% {

color: #222;

text-shadow: 0 0 10px #000, 1px 1px rgb(99, 74, 82), -2px 0px 4px #29121A;

}

100% {

color: #E91E63;

text-shadow: 0 0 10px #E91E63, 1px 1px rgb(255, 149, 162), 0 0 280px #E91E9F;

}

}

@keyframes bgNeon2 {

0% {

background-color: #260127;

}

80% {

background-color: #260127;

}

81% {

background-color: #111;

}

94% {

background-color: #111;

}

95% {

background-color: #260127;

}

96% {

background-color: #111;

}

97% {

background-color: #260127;

}

98% {

background-color: #260127;

}

99% {

background-color: #111;

}

100% {

background-color: #260127;

}

}