css3图片文字实现动画效果
css3图片文字实现动画效果
暮色呼如浏览 1295回答 2
2回答
-
梦里花落0921
<!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> -
白衣染霜花
1234div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; }infinite：规定动画应该无限次播放。关于CSS3的属性，建议你可以去看看HTML5学堂，里面有相关的案例分析与讲解。
随时随地看视频慕课网APP
相关分类
CSS3