首页 > 代码库 > 简单动画

简单动画

2024-09-21 02:49:04   216人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本包装类型</title>
<style type="text/css">
  .red{
      position: absolute;
         width: 100px;
         height: 100px;
         background: red;
     }

    .blue{ width: 100px;
        height: 100px;
        background: blue;

    }
#pox{
    width: 150px;
    height: 150px;
    background: orange;
    display: block;
}

</style>


    <link rel="stylesheet" href="">
    <!--script type="text/javascript" src="http://www.mamicode.com/dowe3.js"></script-->
</head>
<body>






    <div id="box" class="red" style="width: 100px">测试Div</div>

<script>

    var box = document.getElementById(‘box‘);

    function yd() {
       var r=get();
       var g=get();
       var b=get();
       var color=‘#‘+r+g+b;
       box.style.backgroundColor=color;

       if(!box.style.left){
           box.style.left=‘1px‘;
       }else {
           var left = parseInt(box.style.left) + 1;
           //console.log();
           box.style.left = left + ‘px‘;
       }
    }
function get() {
    return parseInt(Math.random()*256).toString(16);
}
    setInterval(yd, 100);


</script>


</body>
</html>

 

简单动画


联系
我们