css有个执行简单动画的写法,比如animation。
我给你个例子:
#head-pic,#head-pic2{
width:145pxheight:145pxposition:absolute
top:200px
left:68px
z-index:2
border-radius:100px
-webkit-border-radius:100px
-moz-border-radius:100px
border:3px solid #fff
}
/*为浏览器兼容设置*/
@keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
@-moz-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-moz-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic.jpg)opacity:1.0}
}
@-webkit-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-webkit-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
@-o-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-o-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
#head-pic{
animation:headpic-slider 20s linear infinite
-moz-animation:headpic-slider 20s linear infinite
-webkit-animation:headpic-slider 20s linear infinite
}
#head-pic2{
animation:headpic-slider2 20s linear infinite
-moz-animation:headpic-slider2 20s linear infinite
-webkit-animation:headpic-slider2 20s linear infinite
}
不兼容原因,a标签属于内联标记,不应该给他直接设置padding应该避免的是,元素需要定义高度和宽度的时候尽量避免设置padding属性而用margin属性代替。解决方案,A标签必须属性是行元素display:blockA标签如果有宽度高度属性,那么就不能有padding属性,(IEFF解释不一样所以不能使用。)A标签如果没有宽度高度属性可以使用padding,那么他外层就必须有元素有对应属性固定A标签的宽度和高度。解决代码一。css修改:a{font-size:14pxcolor:#006699}修改为a{font-size:14pxcolor:#006699display:blockpadding:5px}新添加一个ID#all{width:145pxheight:122px}标签修改修改为此方式使用padding,所以A标签不能有高度和宽度属性,从新定义一个DIV封套住A标签,DIV标签设置宽度高度宽度属性。(值=实际尺寸+padding尺寸)解决代码二,css修改:a{font-size:14pxcolor:#006699}修改为a{font-size:14pxcolor:#006699display:blockpadding:5pxwidth:145pxheight:122px}标签修改修改为此方法给A定义宽度高度,所以能使用padding而用A内部的img标签定义margin分开空隙。