css3圖片文字實現(xiàn)動畫效果
2 回答
夢里花落0921
TA貢獻(xiàn)1772條經(jīng)驗 獲得超6個贊
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
*{padding:0; margin:0; border:0;}
.left{width:50%; float:left;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
.right{width:50%; float:left;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
animation-delay: 5s; /* W3C 和 Opera */
-moz-animation-delay: 5s; /* Firefox */
-webkit-animation-delay: 5s; /* Safari 和 Chrome */
}
@keyframes myfirst
{
0% { opacity:0;}
100% { opacity:1;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% { opacity:0;}
100% { opacity:1;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% { opacity:0;}
100% { opacity:1;}
}
@-o-keyframes myfirst /* Opera */
{
0% { opacity:0;}
100% { opacity:1;}
}
</style>
</head>
<body>
<div>
<div class="left"> <img src="images/xxx.jpg"> </div>
<div class="right"> 文字XXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</body>
</html>
白衣染霜花
TA貢獻(xiàn)1796條經(jīng)驗 獲得超10個贊
1 2 3 4 | div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; } |
infinite：規(guī)定動畫應(yīng)該無限次播放。關(guān)于CSS3的屬性，建議你可以去看看HTML5學(xué)堂，里面有相關(guān)的案例分析與講解。
- 2 回答
- 0 關(guān)注
- 1334 瀏覽
添加回答
舉報
0/150
提交
取消