0

我目前正试图让我的 CSS3 动画在大多数浏览器上工作,但目前我只让它在 web kit 浏览器上工作。

这是我的代码:

h1 {


font-family: 'BebasRegular', sans-serif;

font-size: 150px;
padding-bottom: 100px;
padding-top: 50px;



background: #E9AB17 -webkit-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;

-webkit-background-size:  75px 200px;

color: rgba(255, 255, 255, 0.1);

-webkit-background-clip: text;

-webkit-animation-name: shine;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite; 
     text-align:center;


}

我已经添加到代码中,但我仍然遇到问题。

h1 {
font-family: 'BebasRegular', sans-serif;
font-size: 150px;
padding-bottom: 100px;
padding-top: 50px;



background: #E9AB17 -webkit-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;
background: #E9AB17 -moz-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;
background: #E9AB17 -o-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;
background: #E9AB17 linear-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;   



-webkit-background-size:  75px 200px;
 background-size: 75px 200px; /* Chrome, Firefox 4+, IE 9+, Opera, Safari 5+ */

 color: rgba(255, 255, 255, 0.1);

 -webkit-background-clip: text;
 background-clip: text;

-webkit-animation-name: shine;
-moz-animation-name: shine;
-o-animation-name: shine;
animation-name: shine;



-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;


-webkit-animation-iteration-count: infinite; 
-moz-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 
animation-iteration-count: infinite; 



     text-align:center;


}




@-webkit-keyframes shine
{
0%
{
background-position: bottom left;
}
28%,100%
{
background-position: top right;
}
}




@-moz-keyframes shine {
0%
{
background-position: bottom left;
}
28%,100%
{
background-position: top right;
}
}@-o-keyframes shine {
0%
{
background-position: bottom left;
}
28%,100%
{
background-position: top right;
}
}@keyframes shine {
0%
{
background-position: bottom left;
}
28%,100%
{
background-position: top right;
}
}    
4

1 回答 1

0

彩色斯拉

我想这可能是你需要的渐变。

至于 这里的动画

有关 CSS 兼容性的更多信息,请参见 此处

于 2013-05-21T00:54:49.350 回答