我在这个网站和其他地方都搜索过这方面的高低帮助,但似乎无法弄清楚发生了什么以及它为什么不起作用。我已经能够在Chrome,Safari,Opera和IE中使用它。你愿意看看并帮助我吗?如果代码没有正确显示,我很抱歉,这是我的第一篇文章。 (URL www.djopus.com)
.flexslider {
border: 0;
position: relative;
zoom: 1;
height: auto;
-webkit-animation:uplighting 10s; /* Chrome, Safari, Opera */
-moz-animation:uplighting 10s;
animation:myfirst 10s;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes uplighting
{
0% {-webkit-box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);
box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);}
20% {-webkit-box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);
box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);}
40% {-webkit-box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);
box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);}
60% {-webkit-box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);
box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);}
80% {-webkit-box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);
box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);}
90% {-webkit-box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);
box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);}
100% {-webkit-box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);
box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);}
}
@-moz-keyframes uplighting
{
0% {-webkit-box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);
box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);}
20% {-webkit-box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);
box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);}
40% {-webkit-box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);
box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);}
60% {-webkit-box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);
box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);}
80% {-webkit-box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);
box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);}
90% {-webkit-box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);
box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);}
100% {-webkit-box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);
box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);}
}
/* Standard syntax */
@keyframes uplighting
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
答案 0 :(得分:0)
您忘记将动画名称从“myfirst”更改为“uplighting”:)
这是非常复杂的代码的结果,可以很容易地简化。所有现代桌面浏览器都支持动画,没有特定于供应商的前缀。如果你真的需要,你只需要在某些智能手机上使用-webkit for Safari。有关更多详细信息,请参阅以下文章:Blink HTML text tag and its alternatives,解释CSS动画兼容性。
因此,CSS应如下所示:
.flexslider {
border: 0;
position: relative;
zoom: 1;
height: auto;
animation: uplighting 10s infinite;
}
@keyframes uplighting
{
0% { background: red }
25% { background: yellow }
50% { background: blue }
100% { background: green }
}
试试这个,你肯定会喜欢这个结果!