0

我正在尝试在 aborder-image的底部为 a设置动画，<section>但它不起作用。你能帮我吗 ？

这是CSS：

section.intro {
/*  border-color:#06b4c8;*/
/*  border-style:solid;*/
/*  border-width:0 0 75px 0;*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 1%;
    border-style: solid; 
    border-width: 0px 0px 75px 0px;
    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;
    -webkit-border-image: url(../img/vague.png) 0 0 75 stretch; 
    -o-border-image: url(../img/vague.png) 0 0 75 stretch; 
    border-image: url(../img/vague.png) 0 0 75 fill stretch; 
    animation-name: waving;
}
section.intro {
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: waving;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
@-moz-keyframes waving {
    0% {    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;}
    50% {    -moz-border-image: url(../img/vague.png) 0 1603 75 stretch;}
    100% {    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;}
}
@-webkit-keyframes waving {
    0% {    -webkit-border-image: url(../img/vague.png) 0 0 75 stretch;}
    50% {    -webkit-border-image: url(../img/vague.png) 0 1603 75 stretch;}
    100% {    -webkit-border-image: url(../img/vague.png) 0 0 75 stretch;}
} 
@keyframes waving {
    0% {    border-image: url(../img/vague.png) 0 0 75 fill stretch;}
    50% {    border-image: url(../img/vague.png) 0 1603 75 fill stretch;}
    100% {    border-image: url(../img/vague.png) 0 0 75 fill stretch;}
}
4

1 回答 1

1

它在 Chrome 中为我工作，移除 webkit 语法

CSS

section.intro {
/*  border-color:#06b4c8;*/
/*  border-style:solid;*/
/*  border-width:0 0 75px 0;*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 1%;
    border-style: solid; 
    border-width: 0px 0px 75px 0px;
    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;
    -o-border-image: url(../img/vague.png) 0 0 75 stretch; 
  border-image: url(http://placekitten.com/200/50) 0 0 75 fill stretch;  
    animation-name: waving;

    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: waving;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
@-moz-keyframes waving {
    0% {    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;}
    50% {    -moz-border-image: url(../img/vague.png) 0 1603 75 stretch;}
    100% {    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;}
}
@-webkit-keyframes waving {
    0% { border-image-slice: 0 0 75;}
    50% {  border-image-slice: 0 20 75;}
    100% {   border-image-slice: 0 0 75;}
} 
@keyframes waving {
    0% {    border-image: url(../img/vague.png) 0 0 75 fill stretch;}
    50% {    border-image: url(../img/vague.png) 0 1603 75 fill stretch;}
    100% {    border-image: url(../img/vague.png) 0 0 75 fill stretch;}
}

小提琴

我还将属性更改为您真正更改的动画（不是完整的边框图像）

于 2013-11-08T21:17:50.277 回答