css3如何讓圖片自動移動
1 回答
HUH函數(shù)
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超4個贊
自動移動，目前css3是有這樣的效果的，叫做css3動畫
給你一個示例
你要注意的一點(diǎn)是目前這個只能支持最低為IE10及以上版本才能夠運(yùn)行的哦
Chrome 和 Safari 需要前綴 -webkit-。
<!DOCTYPE html>
<html>
<head>
<style>?
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
?
@keyframes myfirst
{
0% ? {background:red; left:0px; top:0px;}
25% ?{background:yellow; left:200px; top:0px;}
50% ?{background:blue; left:200px; top:200px;}
75% ?{background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
?
@-moz-keyframes myfirst /* Firefox */
{
0% ? {background:red; left:0px; top:0px;}
25% ?{background:yellow; left:200px; top:0px;}
50% ?{background:blue; left:200px; top:200px;}
75% ?{background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
?
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% ? {background:red; left:0px; top:0px;}
25% ?{background:yellow; left:200px; top:0px;}
50% ?{background:blue; left:200px; top:200px;}
75% ?{background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
?
@-o-keyframes myfirst /* Opera */
{
0% ? {background:red; left:0px; top:0px;}
25% ?{background:yellow; left:200px; top:0px;}
50% ?{background:blue; left:200px; top:200px;}
75% ?{background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
?
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
?
<div></div>
?
</body>
</html>
添加回答
舉報
0/150
提交
取消