前端大神啊,来一个能够兼容 火狐的 淡入淡出 呼吸灯效果可好????
.breath_light {
/*width: 50px; /* 宽度 */*/
/*height: 4px; /* 高度 */*/
opacity: 0.8; /* 不透明度 */
overflow: hidden; /* 溢出隐藏 */
/*margin: 25% auto; /* 外边距 */*/
/* IE10、Firefox and Opera,IE9以及更早的版本不支持 */
animation-name: breath; /* 动画名称 */
animation-duration: 1s; /* 动画时长3秒 */
animation-timing-function: ease-in-out; /* 动画速度曲线:以低速开始和结束 */
animation-iteration-count: infinite; /* 播放次数:无限 */
/* Safari and Chrome */
-webkit-animation-name: breath; /* 动画名称 */
-webkit-animation-duration: 1s; /* 动画时长3秒 */
-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线:以低速开始和结束 */
-webkit-animation-iteration-count: infinite; /* 播放次数:无限 */
}
@keyframes breath {
from { opacity: 0.2; } /* 动画开始时的不透明度 */
50% { opacity: 1; } /* 动画50% 时的不透明度 */
to { opacity: 0.2; } /* 动画结束时的不透明度 */
}
@-webkit-keyframes breath {
from { opacity: 0.5; } /* 动画开始时的不透明度 */
50% { opacity: 1; } /* 动画50% 时的不透明度 */
to { opacity: 0.5; } /* 动画结束时的不透明度 */
}
-moz-前缀加上去试试,
.breath-light {
opacity: .8;
overflow: hidden;
-webkit-animation: breath 4s ease-in-out infinite;
animation: breath 4s ease-in-out infinite;
}
@-webkit-keyframes breath {
from {
opacity: .2;
}
50% {
opacity: 1;
}
to {
opacity: .2;
}
}
@keyframes breath {
from {
opacity: .2;
}
50% {
opacity: 1;
}
to {
opacity: .2;
}
}
用autoprefix生成的,貌似不需要-moz-,火狐下有效果
书写顺序的关系吗。
原始的不带前缀的要放在最后面。以后成为正式css属性的时候就不用回来改了
你只加上了-webkit的 再加上火狐的私有前缀 -moz