                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /十天精通CSS3

加了前綴了。谷歌上沒(méi)有效果呢？

? display: inline-block;

? width: 20px;

? height: 20px;

? background: orange;

? border-radius: 100%;

? -webkit-animation-name:around;

? animation-name:around;

? animation-duration: 10s;

? animation-timing-function: ease;

? animation-delay: 1s;

? animation-iteration-count:infinite;

Minya

2015-02-06

源自：十天精通CSS3 9-2

關(guān)注問(wèn)題我要回答

1455

操作

收起

2 回答

qq_謡薳嘚灬聲夥_0
2015-02-22

我是360的 ?

@-webkit-keyframes around{

? 0% {

? ? -webkit-transform: translateX(0);

? }

? 25%{

? ? -webkit-transform: translateX(180px);

? }

? 50%{

? ? ?-webkit-transform: translate(180px, 180px);?

? }

? 75%{

? ? -webkit-transform:translate(0,180px);

? }

? 100%{

? ? -webkit-transform: translateY(0);

? }

}

div {

? width: 200px;

? height: 200px;

? border: 1px solid red;

? margin: 20px auto;

}

div span {

? display: inline-block;

? width: 20px;

? height: 20px;

? background: orange;

? border-radius: 100%;

? -webkit-animation:around;

? -webkit-animation-duration: 10s;

? -webkit-animation-timing-function: ease;

? -webkit-animation-delay: 1s;

? -webkit-animation-iteration-count:infinite;

}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

skyd
2015-02-20

是這樣的哦

@keyframes?around{
??0%?{
????transform:?translateX(0);
??}
??25%{
????transform:?translateX(180px);
??}
??50%{
?????transform:?translate(180px,?180px);?
??}
??75%{
????transform:translate(0,180px);
??}
??100%{
????transform:?translateY(0);
??}
}
@-webkit-keyframes?around{
??0%?{
????transform:?translateX(0);
??}
??25%{
????transform:?translateX(180px);
??}
??50%{
?????transform:?translate(180px,?180px);?
??}
??75%{
????transform:translate(0,180px);
??}
??100%{
????transform:?translateY(0);
??}
}
div?{
??width:?200px;
??height:?200px;
??border:?1px?solid?red;
??margin:?20px?auto;
}
div?span?{
??display:?inline-block;
??width:?20px;
??height:?20px;
??background:?orange;
??border-radius:?100%;
??-webkit-animation:around;
??-webkit-animation-duration:?10s;
??-webkit-animation-timing-function:?ease;
??-webkit-animation-delay:?1s;
??-webkit-animation-iteration-count:infinite;
??animation:around;
??animation-duration:?10s;
??animation-timing-function:?ease;
??animation-delay:?1s;
??animation-iteration-count:infinite;
}