CSS3 动画背景不适用于 firefox
CSS3 animation background not work on firefox
你好,我有这个例子,它工作正常 chrome 和 opera 但在 firefox 中不工作
body {
width: 100%;
height: 100%;
background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
-webkit-animation: mymove 10s;
/* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite;
/* Chrome, Safari, Opera */
-moz-animation: mymove 10s;
-moz-animation-iteration-count: infinite;
animation: mymove 10s;
animation-iteration-count: infinite;
}
@-webkit-keyframes mymove {
from {
background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
}
to {
background: url('http://www.picz.ge/img/s4/1505/17/b/b2c36d72aaa6.png');
}
}
@-moz-keyframes mymove {
from {
background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
}
to {
background: url('http://www.picz.ge/img/s4/1505/17/b/b2c36d72aaa6.png');
}
}
@keyframes mymove {
from {
background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
}
to {
background: url('http://www.picz.ge/img/s4/1505/17/b/b2c36d72aaa6.png');
}
}
您可以使用 :pseudo 元素添加 background-image
并更改其不透明度
你好,我有这个例子,它工作正常 chrome 和 opera 但在 firefox 中不工作
body {
width: 100%;
height: 100%;
background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
-webkit-animation: mymove 10s;
/* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite;
/* Chrome, Safari, Opera */
-moz-animation: mymove 10s;
-moz-animation-iteration-count: infinite;
animation: mymove 10s;
animation-iteration-count: infinite;
}
@-webkit-keyframes mymove {
from {
background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
}
to {
background: url('http://www.picz.ge/img/s4/1505/17/b/b2c36d72aaa6.png');
}
}
@-moz-keyframes mymove {
from {
background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
}
to {
background: url('http://www.picz.ge/img/s4/1505/17/b/b2c36d72aaa6.png');
}
}
@keyframes mymove {
from {
background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png');
}
to {
background: url('http://www.picz.ge/img/s4/1505/17/b/b2c36d72aaa6.png');
}
}
您可以使用 :pseudo 元素添加 background-image
并更改其不透明度