css3图片文字实现动画效果
css3图片文字实现动画效果
月关宝盒浏览 439回答 2
2回答
-
互换的青春
<!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> -
慕田峪9158850
1234div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; }infinite：规定动画应该无限次播放。
随时随地看视频慕课网APP
相关分类
CSS3