zoukankan      html  css  js  c++  java
  • DOM的CSS与JS动画效果

    dom动画效果可以用CSS也可以用JS来实现,如果我们设置一个div让它从左往右动起来,就可以实现一个简单的动画效果。

    1、CSS动画效果如下:

    <style>
    #dongqilai {
    100px;
    height: 100px;
    background-color: cadetblue;
    margin-left:100px;*/
    }
    #dongqilai:hover{
    margin-left: 100px;
    transform: rotate(360deg);(旋转)
    background-color: red;
    transition: 0.5s;(过渡)
    }
    </style>

    <body>
    <div id="dongqilai" style="margin-left: 30px;"></div>

    </body>

    2、JS动画效果如下:

    <script>

    var x = document.getElementById("dongqilai");
    alert(x.offsetLeft);(相对于父对象的左边距)
    x.style.marginLeft = "100px";
    alert(parseInt(x.style.marginLeft));

    alert(window.screen.availWidth);
    var a = window.setInterval("change()",15);
    function change()
    {
    var x = document.getElementById("dongqilai");
    var left = x.style.marginLeft;
    left = parseInt(left);
    left += 1;
    if(left <= 500)
    {
    x.style.marginLeft = left + "px";
    }
    else
    {
    window.clearInterval(a);
    }

    }
    </script>

  • 相关阅读:
    Vim使用
    软件测试基础知识
    数字成像系统
    linux操作系统运行学习总结
    python算法学习总结
    Django Rest Framework框架
    mysql学习笔记一
    学习方法
    算法模板汇总
    习题练习1
  • 原文地址:https://www.cnblogs.com/mengshenshenchu/p/6605227.html
Copyright © 2011-2022 走看看