css3图片文字实现动画效果
2 回答
梦里花落0921
TA贡献1772条经验 获得超6个赞
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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贡献1796条经验 获得超10个赞
1 2 3 4 | div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; } |
infinite：规定动画应该无限次播放。关于CSS3的属性，建议你可以去看看HTML5学堂，里面有相关的案例分析与讲解。
- 2 回答
- 0 关注
- 1293 浏览
添加回答
举报
0/150
提交
取消