html代码控制字体上下浮动,css3动画 实现字体闪烁或者灯泡上下浮动

话不多少，直接贴代码`

.el-loading-mask {

position: absolute;

z-index: 10000;

background-color: rgba(255, 255, 255, .9);

margin: 0;

top: 0;

right: 0;

bottom: 0;

left: 0;

transition: opacity .3s;

}

.wrapper {

width: 54px;

height: 30px;

position: absolute;

top: 50%;

left: 50%;

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

}

.wrapper img {

-webkit-animation: jump 1.5s infinite ease-in-out alternate;

-moz-animation: jump 1.5s infinite ease-in-out;

-ms-animation: jump 1.5s infinite ease-in-out;

-o-animation: jump 1.5s infinite ease-in-out;

animation: jump 1.5s infinite ease-in-out alternate;

animation-fill-mode: forwards;

-webkit-animation-fill-mode: forwards;

}

@-webkit-keyframes jump {

0% {

-webkit-transform: translateY(0px);

}

100% {

-webkit-transform: translateY(50px);

}

}

@keyframes jump {

0% {

transform: translateY(0px);

}

100% {

transform: translateY(50px);

}

}

该示例是一个上下浮动的灯泡，文本闪烁只需要修改opacity，或者color：transparent

通过animation-timing-function可以设置动画的变化方式，通过animation-iteration-count设置播放次数，值为infinite表示无限次播放。animation-direction表示播放放心，alternate表示有来有回的播放，或者说动画会在奇数次(1，3，5…)正常播放，而在偶数次(2，4，6…)反向播放。