您的位置：首页 > Web前端 > JavaScript

js延迟控制图片动画显示

2017-12-22 21:44 387 查看
 <body>
  
 <style>
 div
 {
 width:100px;
 height:100px;
 background:red;
 position:relative;
 animation:mymove 5s infinite;
 -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
 }
  
 @keyframes mymove
 {
 from {left:0px;}
 to {left:200px;}
 }
  
 @-webkit-keyframes mymove /*Safari and Chrome*/
 {
 from {left:0px;}
 to {left:200px;}
 }
  
 </style>
  
  
  
 <input
type="button"
id="btn"
value="click me" />
 <div
id="div"
style="width:100px; height:100px; background:#ccc; display:none;"
 </body>
 <script>
 var oDiv = document.getElementById('div');
 var oBtn = document.getElementById('btn');
 oBtn.onclick=function(){
 setTimeout(function(){
 oDiv.style.display = 'block';
 },1000);
 };
 </script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航