css3图片文字实现动画效果
发布网友
发布时间：2022-04-21 17:36
共4个回答
热心网友
时间：2022-04-06 12:12
<!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>
热心网友
时间：2022-04-06 13:30
设置一个 只播放一次的动画 使用 opacity来实现。追问css不会，能不能说具体点
热心网友
时间：2022-04-06 15:05
用jq回调函数实现
热心网友
时间：2022-04-06 16:56
img.onload=function(){}
